css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢？相关的知识，希望对你有一定的参考价值。
保留住动画的最后状态2113，在animation后面加上forwards就可5261以了代码如下：4102
-webkit-animationanimations 1s ease 1 forwards
注意：动画如果只执行一次，1653通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。
扩展资料
CSS animation 与 CSS transition 有何区别
一、指代不同
1、animation ：属性是一个简写属性，用于设置六个动画属性。
2、transition：属性是一个简写属性，用于设置四个过渡属性。
二、特点不同
1、animation ：animation: name duration timing-function delay iteration-count direction，规定需要绑定到选择器的 keyframe 名称。规定完成动画所花费的时间，以秒或毫秒计。
2、transition：transition: property duration timing-function delay，规定设置过渡效果的 CSS 属性的名称。规定完成过渡效果需要多少秒或毫秒。
参考技术A保留住动画的最后状态，在animation后面加上forwards就可以了代码如下：
-webkit-animationanimations 1s ease 1 forwards
注意：动画如果只执行一次，通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。
扩展资料：
animation的其他用法：
1. -webkit-animation-duration 表示动画持续的时间
2. -webkit-animation-timing-function 表示动画使用的时间曲线
3. -webkit-animation-delay 表示开始动画之前的延时
4. -webkit-animation-iteration-count 表示动画要重复几次
5. -webkit-animation-iteration-count: times_number;
6. -webkit-animation-direction 表示动画的方向
animation-fill-mode
语法：
animation-fill-mode：none | forwards | backwards | both [ ,
none | forwards | backwards | both ]*
默认值：none
适用于：所有元素，包含伪对象:after和:before
继承性：无
取值：
none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：
设置对象状态为动画结束或开始的状态
说明：
检索或设置对象动画时间之外的状态
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为animationFillMode。
这个是最简单的方法，
也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式 参考技术C 动画如果只执行一次，光通过css无法办到，可以把动画结束时的样式写入一个class中，用js在动画结束时把class赋给这个对象。追问
我是这样做的，不过我总觉得有更好的办法。你做webapp开发吗？
本回答被提问者和网友采纳 参考技术D -webkit-animationanimations 1s ease 1 forwards 最后加这个forwards 就可以了CSS动画，每个子元素都有延迟
我试图通过将动画应用于每个子元素来创建级联效果。我想知道是否有更好的方法来做到这一点：
.myClass img:nth-child(1){
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
-webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
-webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
-webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
-webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}
等等......所以基本上，我想为每个孩子制作一个动画，但是会有延迟。感谢您的任何意见！
另外：也许我没有正确解释我的担忧：无论我有多少孩子，这都是关于如何做到的。如何做到这一点，而不必写下每个孩子的属性...例如，当我不知道将有多少孩子。
你想要的是animation delay财产。
@keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myClass img {
float: left;
margin: 20px;
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }<div class="myClass">
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
</div>这是使用for循环执行此操作的scss方法。
@for $i from 1 through 10 {
.myClass img:nth-child(#{$i}n) {
animation-delay: #{$i * 0.5}s;
}
}
在完全支持attr和calc的[希望接近]未来，我们将能够在没有JavaScript的情况下实现这一目标。
HTML：
<ul class="something">
<li data-animation-offset="1.0">asdf</li>
<li data-animation-offset="1.3">asdf</li>
<li data-animation-offset="1.1">asdf</li>
<li data-animation-offset="1.2">asdf</li>
</ul>
CSS：
.something > li
{
animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}
这将产生一种效果，其中每个列表项以看似随机的顺序动画。
您还可以在CSS中使用transition-delay属性，并使用JS或JQuery为每个子元素分配不同的延迟。 （假设s是以秒为单位的起始延迟）
$(".myClass img").each(function(index){
$(this).css({
'transition-delay' : s*(1+index) + 's'
});
});
因此，孩子们将有1 * s，2 * s，3 * s等转换延迟等等。现在，要创建实际的动画效果，只需设置所需的过渡，子项将按顺序设置动画。奇迹般有效 ！
如果你有很多项目（例如：我有一个> 1000个项目的分页表，并且想要在页面加载时使每个行都有延迟动画），你可以使用jQuery解决这个问题并避免css文件大小上升。动画延迟动态增加。
$.each($('.myClass'), function(i, el){
$(el).css({'opacity':0});
setTimeout(function(){
$(el).animate({
'opacity':1.0
}, 450);
},500 + ( i * 500 ));
});
编辑：这是我调整为与animate.css一起使用的相同代码（在使用https://gist.github.com/1438179之前安装额外的插件）
$.each($(".myClass"), function(i, el){
$(el).css("opacity","0");
setTimeout(function(){
$(el).animateCSS("fadeIn","400");
},500 + ( i * 500 ));
});
其中“fadeIn”是动画类型，“400” - 动画执行时间，500 - 延迟页面上要动画的每个元素。
像这样：
.myClass img {
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.myClass img:nth-child(2){
-webkit-animation-delay: 0.2s;
}
[...etc...]
以上是关于css3的-webkit-animation动画执行后会变回原来的样子，怎么保留住动画最后的状态呢？的主要内容，如果未能解决你的问题，请参考以下文章