CSS 动画 过渡（转载）

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%的样式均应用。

 

https://www.cnblogs.com/fsjohnhuang/p/9143035.html  过渡