animate动画执行一次并且停留在最后一帧

最新推荐文章于 2023-10-12 17:57:22 发布

ruanhongbiao

最新推荐文章于 2023-10-12 17:57:22 发布

阅读量6.9k

点赞数 1

分类专栏： CSS3 文章标签： css3 js animation

本文链接：https://blog.csdn.net/qappleh/article/details/95092860

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方法一：css3

animation-iteration-count:1;/*动画只执行一次*/
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    animation-fill-mode: forwards; /*让动画停留在最后一帧 */
    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards;

方法二：js

animation只触发一次解决办法。

通过js控制让animation等于空，删除animation样式。

document.getElementById("div").style.animation = "";

document.getElementById("div").style.animation = "mymove 2s";

注意点：

1.js是一条语句执行一次清空animation一定要在动画执行完之后执行清空语句和新的animation setTimeout()

2.如果是有判断条件的情况下，通过判断条件来执行清空语句 if() switch(){}

3.js操控的样式为行间样式，当animation不是添加在行间的时候，js操作无效。应当把animation添加在行间！否则会产生小bug （非常重要的一点必须这么做可清除小bug）

4.@keyframes 这个不需要放在行间可放在任何地方不影响任何动画效果

提醒：

使用animation 一定要通过时间轴仔细计算行为的准确时间节点

小技巧：

animation配合setInterval()使用的时候，setInterval() 执行时间和动画执行时间长短清空时把时间设置成0.000000000000000000001毫秒，这样边可以实现无缝切换。

例:不通过animation的次数来实现循环播放动画

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{width: 100px;
height: 100px;
background-color: red;
}


@keyframes mymove{
0%{width: 200px;}
100{width: 390px;}
}
</style>


<script type="text/javascript">
window.onload = function (){
setInterval(function  move(){
document.getElementById("div1").style.animation = "";
setTimeout(function(){document.getElementById("div1").style.animation = "mymove 2s";},30);

},2000);



}
</script>
</head>
<body>
<div id="div1"  style="animation: mymove 2s;">
</div>
</body>
</html>

ruanhongbiao

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
animate动画执行一次并且停留在最后一帧

方法一：css3animation-iteration-count:1;/*动画只执行一次*/ -moz-animation-iteration-count:1; -webkit-animation-iteration-count:1; -o-animation-iteration-count:1; animation-fill-mode: forwards;...
复制链接

扫一扫