我有一个 div，其中的内容为动画：
#container {
position: relative;
width: 100px;
height: 100px;
border-style: inset;
}
#content {
visibility: hidden;
-webkit-animation: animDown 1s ease;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
background-color: lightgreen;
}
#container:hover #content {
-webkit-animation: animUp 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
100% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
}
<div id="container">
<div id="content"></div>
</div>
悬停时，内容会滑入容器 div 中。
当我刷新页面并加载页面时，#content的 animDown 动画将运行，我希望它仅在悬停事件后运行。
有没有办法做到这个纯 CSS，或者我必须在 JS 中解决一些问题？
http://jsfiddle.net/d0yhve8y/
我总是将预加载类设置为主体，动画时间值为 0，并且效果很好。我有一些后退过渡，所以我也必须删除它们的加载动画。我通过临时将动画时间设置为 0 解决了这个问题。您可以更改过渡以匹配您的过渡。
HTML
... <body class="preload">...
CSS 将动画设置为 0s
body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}
JS 将在延迟一段时间后删除类，以便动画可以在正常时间发生:)
setTimeout(function(){
document.body.className="";
},500);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
