CSS3 Animation 帧动画 steps() --冯浩的博客
程序员文章站
2022-03-27 17:11:14
...
CSS3的Animation 复合使用:
animation: move 1s steps(12,end) infinite ;
第一个参数是调用keyframes动画
第二个参数规定的时间
第三个参数steps(12,end)
steps() 函数:
steps(12,end)
第一个参数是在规定的时间中的间隔数量;
第二个参数值有两个(end和start)
end:动画执行时以结尾端点为开始;
start:动画执行时为开始左侧端点的部分为开始
第四个参数:重复的次数 infinite(无限次的循环)
@keyframes move{
from{
background-position: 0 0;
}
to{
background-position:-576px 0;
}
}
CSS3的Animation有八个属性
animation-name :动画名 fn
animation-duration:时间 1s
animation-delay:延时 1s
animation-iteration-count:次数 infinite
animation-direction:方向 alternate(反向)
animation-play-state:控制 running paused
animation-fill-mode:状态 forwards(当动画完成后,保持最后一个属性值)
animation-timing-function:关键帧变化
下一篇: 将时间格式化为带T,Z的格式
推荐阅读
-
用animation的steps属性制作帧动画
-
用animation的steps属性制作帧动画
-
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
-
深入理解CSS3 Animation 帧动画 ( steps )_html/css_WEB-ITnose
-
深入理解CSS3 Animation 帧动画 ( steps )_html/css_WEB-ITnose
-
关于CSS3的animation实现逐帧动画效果
-
关于CSS3的animation实现逐帧动画效果
-
CSS3 Animation 帧动画 steps() --冯浩的博客
-
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍
-
关于如何使用css3中的steps完成图片帧动画