@keyframes animationname {keyframes-selector {css-styles;}}
<u></u>keyframes
用来定义CSS动画
将一套CSS样式逐渐变为另一套
可以百分比规定改变发生的时间,
或者通过关键字“from
”和“to
”,等价于0%
和100%
animation: name duration timing-function delay iteration-count direction;
animation
是一个简写属性,用于设置6个动画属性。
name
:keyframes名字,
duration
:动画持续时间,
timing-function
:速度曲线,
delay
:动画开始前的延迟,
iteration-count
:播放的次数,
direction
:是否轮流反向播放。
注:
animation-iteration-count:infinite;
可以用于设置循环动画。
网友评论