CSS-过渡效果和动画效果

Transition

过渡效果

transition： property duration timing-function delay

例子：

transition: background-color 1s linear 1s, color 1s linear;

property

CSS属性名称

duration

时长（2s / 2ms）

time-function

播放速度

time-function：(linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n))

linear - 线性速度

ease - 慢速开始，然后变快

ease-in - 慢速开始

ease-out - 慢速结束

ease-in-out - 慢速开始和慢速结束

 

delay

在过渡前等待（2s / 2ms）

---

Animations

动画效果

@keyframes mycolor{

     0%{

          background-color: red;

     }

     40%{

          background-color: darkblue;

     }

     100%{

          background-color: yellow;

     }

}

div:hover{

     animation-name: mycolor;

     animation-duration: 2s;

     animation-timing-function: linear;

}

@keyframes - 定义动画规则

n% - 定义关键帧

animation-name - 动画名称

animation-duration - 时长

animation-timing-function - 播放速度

animation-delay - 播放前等待

animation-iteration-count - 播放次数（默认1 n|infinite）

animation-direction - 在下一周期是否逆向播放（normal | alternate）

animation-play-state - 播放状态（paused | running）

animation-fill-mode - 播放完成后的状态(none | forwards | backwards | both)