I：transition

（1）作用

补充中间帧

（2）语法

transition：属性名  时长  过渡方式  延迟；

transition属性的过渡方式有很多，常见的有：linear、ease、ease-in、ease-put、ease=in-out、cubic-bezier、step-start、step-end、steps

注：display：none到display：block无法过渡。使用visibility：hidden到visibility：visible

II：animation

（1）语法

①、from to 写法

@keyframes  动画名 {    form{        开始的属性;    }    to{        到达的属性;    }}

②、百分数写法

@keyframes 动画名{    0%{       进度0%时的属性;    }    20%{    进度20%时的属性；    }    100%{        进度100%时的属性;    }} 

（2）animation的写法

animation： 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充 | 模式 | 是否暂停 | 动画名 ；

注：

如何使动画停在最后一帧？

答：在animation属性后加上一个forwards；

更多transition和animation的属性，参考，可详见MDN：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition