animation 属性中的 steps
不只是连续的变化才叫动画
并不是只有连续的变化才叫动画,只要有轨迹可循,即使肉眼看上去是断断续续的,实际上也是动画。所以页面中也有种动画叫逐帧动画,只要够快你就是连续的;
动画属性 animation
animation:mymove 5s infinite linear; mymove 是动画名称、 5s表示这个动画一次播放5秒、infinite 表示播放的次数为无限次、linear代表在这5秒中动画是匀速播放的;
linear 是animation-timing-function 属性的属性值, 是控制动画速度曲线的、(即在这5秒中,控制这个动画是匀速播放,还是先慢后快,还是跳着播放);animation-timing-function 有两个方法cubic-bezier()
和 steps()
;
cubic-bezier() 与 steps()
cubic-bezier 指三次贝塞尔曲线,是控制动画逐渐变化的,cubic-bezier可以简写为:
- linear 匀速
- ease 两端慢中间快,开始一直加速到中间位置,达到最大速度,然后减速到速度为0
- ease-in 相对于匀速,开始的时候慢,之后快
- ease-out 相对于匀速,开始时快,结束时候间慢
- ease-in-out 两端慢中间快,开始慢,然后加速到一个速度大概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速。
steps 动画不连续,画面是跳跃的,像‘闪现’一样:steps 简化出了step-start和step-end这两个关键字,
- step-start等同于 steps(1, start)
- step-end 等同于 steps(1, end)
理解steps()
steps()语法表示为:steps(number, position)
// 写法
steps(5, end);
steps(2, start);
@keyframes move {
0% { left: 0; }
50% { left: 100px; }
100% { left: 200px; }
}
number:表示把一个变化过程(两个帧之间 即 0% 到 50% 之间为一个变化过程)分为5个更小的过程,即五个段落、五个小区间;五个区间6个节点(6面墙划分出五个房间)
position:有start 和 end 两个值:start表示这个小区间中的后一个节点,end 表示这个小区间中的前一个节点 ,start、end 语意和取值恰好相反;所以我们可以这样理解(个人理解):
- start 表示从start的下一个值(就是end)开始取这个6个节点中五个节点
- end 表示从end的下一个值(循环之后就是statr)开始取这个6个节点中五个节点
姑且算个结论
// 所以当
animation:mymove 5s infinite steps(2, start)
@keyframes move {
0% { left: 0; }
50% { left: 100px; }
100% { left: 200px; }
}
// 把0% 到50% 就看做2段3个点(0px、50px、100px)取 0px和 50px,
// 把50% 到100% 就看做2段3个点(100px、150px、200px)取 100px和 150px
// 最终动画的效果为 元素一次跳跃的出现在 0px、50px、100px、150px这些点上
//steps(1, start) 就更简单 0% 到 50% 原本就是一个区间 直接取第一个0px 就好
参考 作者: CSS3 animation属性中的steps功能符深入介绍(张鑫旭)
连接:https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end