Edu*_*rdó 40 css animation keyframe
我有一个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.我的问题是,当我刷新页面,并且页面加载时,#contentanimDown动画将运行,我更喜欢它只在悬停事件之后运行.
有没有办法做这个纯CSS,或者我必须在JS中找出一些东西？
小智 60
我总是将preload类设置为body,动画时间值为0,并且工作得很好.我有一些后退过渡,所以我也必须删除加载动画.我通过将动画时间临时设置为0来解决这个问题.您可以更改过渡以匹配您的过渡.
HTML
... <body class="preload">...
CSS将动画设置为0
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);
Rhu*_*orl 18
解决方案1 - 在第一次悬停时添加动画
可能最好的选择是在用户container第一次盘旋之前不要放下动画.
这包括监听mouseover事件,然后在该点添加一个带动画的类,并删除事件监听器.这主要(潜在)的缺点是它依赖于Javascript.
;(function(){
var c = document.getElementById('container');
function addAnim() {
c.classList.add('animated')
// remove the listener, no longer needed
c.removeEventListener('mouseover', addAnim);
};
// listen to mouseover for the container
c.addEventListener('mouseover', addAnim);
})();#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
opacity:0;
}
/* This gets added on first mouseover */
#container.animated #content {
-webkit-animation:animDown 1s ease;
}
#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);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}<div id="container">
<div id="content"></div>
</div>解决方案2 - 隐藏播放动画
另一种方法是首先隐藏元素,确保动画在隐藏时播放,然后使其可见.这样做的缺点是时间可能稍微偏离,并且过早显示,而且悬停也不会立即显示.
这需要一些等待动画长度的Javascript,然后才能#content显示.这意味着你还需要设置初始值opacity,0以便它不会出现在加载中并visibility从关键帧中删除- 这些都没有做任何事情:
// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
document.getElementById('content').style.visibility = 'visible';
}, 1100);#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;
opacity:0;
}
#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);
opacity:0;
}
100% {
-webkit-transform:translateY(-100%);
opacity:1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform:translateY(-100%);
opacity:1;
}
100% {
-webkit-transform:translateY(0);
opacity:0;
}
}<div id="container">
<div id="content"></div>
</div>解决方案3 - 使用转换
在你的场景中,你只能通过用keyframe一个替换s 来创建这个CSS transition,所以它从一开始opacity:0就只有悬停有一个变化,opacity并且transform:
#container {
position:relative;
width:100px;
height:100px;
border-style:inset;
}
#content {
position:absolute;
top:100px;
width:100%;
height:100%;
background-color:lightgreen;
/* initial state - hidden */
opacity:0;
/* set properties to animate - applies to hover and revert */
transition:opacity 1s, transform 1s;
}
#container:hover #content {
/* Just set properties to change - no need to change visibility */
opacity:1;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}<div id="container">
<div id="content"></div>
</div>有没有办法做到这一点纯 CSS ？
是的，绝对：见fork http://jsfiddle.net/5r32Lsme/2/ 真的不需要JS。
我更喜欢它只在悬停事件之后运行。
所以你需要告诉 CSS 当它不是悬停事件时会发生什么 - 在你的例子中：
#container:not(:hover) #content {
visibility: hidden;
transition: visibility 0.01s 1s;
}
但是有两点需要注意：
1) 上面的过渡延迟应该与您的动画持续时间相匹配
2）您不能使用用于隐藏动画中的动画 onLoad 的属性。如果您确实需要动画中的可见性，请先隐藏动画，例如
#container:not(:hover) #content {
top: -8000px;
transition: top 0.01s 1s;
}
旁注：
建议将原生 CSS 属性放在前缀之后，所以应该是
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
现在有一个原生转换
-webkit-transform: translateY(0);
transform: translateY(0);
由于必须解决类似的挑战， morewry早在 2013 年就发布了一个纯 CSS技巧，即创建一个动画，该动画最初在隐藏元素的关键帧上处于暂停播放状态：
#content {
animation:animDown 1s ease, hasHovered 1ms paused;
animation-fill-mode: forwards; /* for both animations! */
}
#container:hover #content {
animation:animUp 1s ease, hasHovered 1ms;
}
/* hide #content element until #container has been hovered over */
@keyframes hasHovered {
0% { visibility: hidden; } /* property has to be removed */
100% { visibility: visible; } /* from the other animations! */
}
悬停时，由于animation-fill-mode.
有关如何设置animation具有多个动画的子属性，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values