如何防止CSS关键帧动画在网页加载时运行？ [英] How to prevent css keyframe animation to run on page load?
问题描述
我有一个div，其中我动画的内容：
#container {position：relative; width：100px; height：100px; border-style：inset;}＃content {visibility：hidden; -webkit-animation：animDown 1s ease; position：absolute; top：100px;宽度：100％;高度：100％; background-color：lightgreen;}＃container：hover #content {-webkit-animation：animUp 1s ease; animation-fill-mode：forward; -webkit-animation-fill-mode：forward;} @ - webkit-keyframes animUp {0％{-webkit-transform：translateY（0）; visibility：hidden;不透明度：0; } 100％{-webkit-transform：translateY（-100％）;可见度;不透明度：1; }} @ - webkit-keyframes animDown {0％{-webkit-transform：translateY（-100％）;可见度;不透明度：1; } 100％{-webkit-transform：translateY（0）; visibility：hidden;不透明度：0; }}
< div id =container> < div id =content>< / div>< / div>
在悬停内容滑动到容器div。
我的问题是，当我刷新页面，页面加载 #content 的animDown动画将运行，我希望它运行只
有一种方法可以做这个纯CSS，或者我必须在JS中找出一些东西。
解决方案1 - 首次添加向下动画
可能最好的选择是 $
这包括在第一次浏览 mouseover 事件，然后添加一个动画的类，并删除事件侦听器。
;（function（）{var c = document.getElementById '）; function addAnim（）{c.classList.add（'animated'）//删除监听器，不再需要c.removeEventListener（'mouseover'，addAnim）;}; //监听容器c的mouseover。 addEventListener（'mouseover'，addAnim）;}）（）;
#container {position：relative; width：100px; height：100px; border-style：inset;}＃content {position：absolute; top：100px; width：100％;高度：100％;背景颜色：lightgreen; opacity：0;} / *这是第一次鼠标悬停时添加* /＃container.animated #content {-webkit-animation：animDown 1s ease;}＃container：hover #content {-webkit-animation：animUp 1s ease; animation-fill-mode：forward; -webkit-animation-fill-mode：forward;} @ - webkit-keyframes animUp {0％{-webkit-transform：translateY（0）;不透明度：0; } 100％{-webkit-transform：translateY（-100％）;不透明度：1; }} @ - webkit-keyframes animDown {0％{-webkit-transform：translateY（-100％）;不透明度：1; } 100％{-webkit-transform：translateY（0）;不透明度：0; }}
< div id =container> < div id =content>< / div>< / div>
解决方案2 - 播放动画隐藏
另一种方法是最初隐藏元素，播放而隐藏，然后使其可见。这样做的缺点是，时间可能会稍微偏离，并且过早显示，而且悬停也无法立即使用。
这需要一些Javascript它等待动画的长度，然后使 #content 可见。这意味着您还需要将初始 opacity 设置为 0 ，以使其在加载时不会出现， visibility 从关键帧 - 这些没有做任何反正：
对于动画长度，加一点，然后使元素visiblewindow.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％;高度：100％;背景颜色：lightgreen; opacity：0;}＃container：hover #content {-webkit-animation：animUp 1s ease; animation-fill-mode：forward; -webkit-animation-fill-mode：forward;} @ - webkit-keyframes animUp {0％{-webkit-transform：translateY（0）;不透明度：0; } 100％{-webkit-transform：translateY（-100％）;不透明度：1; }} @ - webkit-keyframes animDown {0％{-webkit-transform：translateY（-100％）;不透明度：1; } 100％{-webkit-transform：translateY（0）;不透明度：0; }}
< div id =container> < div id =content>< / div>< / div>
解决方案3 - 使用转换
在您的方案中，您可以通过替换<$ c相反，以
opacity：0 开头的$ c>关键帧只是悬停在 opacity 和变换中有变化：
#container {position：relative; width：100px; height：100px; border-style：inset;}＃content {position：absolute; top：100px; width：100％;高度：100％;背景颜色：lightgreen; / *初始状态 - 隐藏* /不透明度：0; / *设置属性为animate - 适用于悬停和恢复* / transition：opacity 1s，transform 1s;}＃container：hover #content {/ *只需设置属性更改 - 无需更改可见性* / opacity： -webkit-transform：translateY（-100％）; transform：translateY（-100％）;}
div id =container> < div id =content>< / div>< / div>
I have a div in which I animate the content:
#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>
On hover content slides into the container div.
My problem is, when I refresh the page, and the page loads the #content's animDown animation will run, and I'd prefer it to run only after a hover event.
Is there a way to do this pure CSS, or I have to figure something out in JS?
Solution 1 - Add down animation on first hover
Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.
This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on 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>
Solution 2 - play animation hidden
Another way around this is to initially hide the element, make sure the animation plays while it is hidden, then make it visible. The downside of this is that the timing could be slightly off and it is made visible too early, and also the hover isn't available straight away.
This requires some Javascript which waits for the length of the animation and only then makes #content visible. This means you also need to set the initial opacity to 0 so it doesn't appear on load and also remove the visibility from the keyframes - these aren't doing anything anyway:
// 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>
Solution 3 - Use transitions
In your scenario, you can make this CSS only by replacing the keyframes with a transition instead, so it starts with opacity:0 and just the hover has a change in opacity and the 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关键帧动画在网页加载时运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
