transition
transition-property:none|<single-transition-property>["," <single-transition-property>]*，表示哪些属性要执行动画过程
transition-duration:<time>[,<time>]*，动画的执行时间
transition-timing-function:<single-transition-timing-function>[","<sing-transition-time-function>]*，表示动画执行的速度
<single-transition-timing-function>=
ease（两头慢，中间快）|
linear（线性，匀速执行）|
ease-in（开始慢）|
ease-out（结束慢）|
ease-in-out（两头慢，中间块，与ease的区别为，ease的幅度小一点）|
transition-delay:<time>[,<time>]*动画延迟执行
合并：
transition：background 0.2s ease 0s,top 0.2s esae 0.1s（执行的属性名，执行持续时间，匀速还是变速执行，延迟时间，多个的话用,号隔开），需要触发条件，比如鼠标移动上去，点击等
animation
animation:<single-animation>[,<single-animation>]*
<single-animation>=<single-animation-name>||<time>||<single-animation-timing-function>||<time>||<single-animation-iteration-count>||<single-animation-direction>||<single-animation-fill-mode>||<single-animation-play-state>
动画名 || 持续时间 || 变速还是匀速 || 延迟时间 || 执行次数 || 方向 || 动画的第一帧和最后一帧状态 || 动画是否执行
animation-name:<single-animation-name>[","<single-animation-name>]*，自定义的动画名称
animation-duration:<time>[,<time>]*，动画持续时间
animation-timing-function:变速还是匀速
animation-iteration-count:<single-animation-iteration-count>[,<single-animation-iteration-count>]*，表示执行次数infinite|<number>（无限|次数）
animation-direction:<single-animation-direction>[","<single-animation-direction>]*
<single-animation-direction>:
normal，正常
reverse，反向，比如我定义的是从左往右滚动，但是设置这个值后会从右往左滚动
alternate，往返
alternate-reverse，反向往返
animation-play-state:<single-animation-play-state>[,<animation-play-state>]*
<single-animation-play-state>=running（动画执行的）|pused（动画停止的）
animation-delaty:<time>[,<time>]*，延迟时间
animation-fill-mode:<single-animation-fill-mode>[,<single-animation-fill-mode>]
<single-animation-fill-mode>:none（不做设置）|backwards（动画的初始状态为动画的第一帧）|forwards（动画的结束状态为动画的最后一帧）|both
动画定义@keyframes
@keyframes abc{
from{}
to{}
}
==
@keyframes abc{
0%,25%,50%{}
75%,100%{}
}