https://www.cnblogs.com/fsjohnhuang/p/9289618.html 动画
定义动画
@keyframes rotate { from { transform: rotate(90deg); } to { transform: rotate(-360deg); } }
使用动画
<css-selector> {
animation: <animation-name>
<animation-duration>
<animation-timing-function>
<animation-delay>
<animation-iteration-count>
<animation-direction>
<animation-fill-mode>
<animation-play-state>;
}
示例:
.box.rotate {
animation: rotate 10s infinite alternate;
}
子属性介绍
<animation-name>
,指定通过@keyframes定义的补间动画名称。<animation-duration>
,动画持续时长,默认为0s。单位为s和ms。<animation-delay>
,动画播放延迟,默认为0s。单位为s和ms。<animation-iteration-count>
,动画重复播放次数,默认为1,infinite表示无限循环。动画播放总时长为<animation-duration>*<animation-iteration-count>
。<animation-direction>
,可选值为normal | reverse | alternate | alternate-reverse
,分别表示动画播放顺序是从from到to
,从to到from
,从from到to再从to到from
和从to到from再从from到to
。注意:设置alternate|alternate-reverse时,animation-iteration-count必须大于1才能看到效果<animation-fill-mode>
,可选值为none | forwards | backwards | both
,用于设置动画开始前和结束后是否应用0%
和100%
的样式对元素上。分别表示不应用
,应用100%的样式
,延迟播放期间应用0%的样式
和0%和100%的样式均应用
。