css与动画相关的属性

transition

在元素从一个状态变为另一个状态时，定义过渡效果。
1.transition CSS属性是transition-property(默认值all，可使用cubic-bezier自定义曲线)、transition
-duration（默认值0）、transition-timing-function(默认值ease)和transition-delay(默认值0)属性的一个简写。

2.transition可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号隔开。

3.当属性的值个数超过规定的个数，多余的会被忽略。

4.transition: width 1s [1s] linear：第一个时间会解析为transition-duration的值，第二个时间会解析为transition-delay的值。

单边和双边过渡

animation

1.animation属性是animation-name(默认值none，是由@keyframes定义的动画序列)、 animation-duration(默认值0)、 animation-delay(默认值0)、 animation-timing-function(默认值ease，速度轨迹函数)、 animation-iteration-count(默认值1)、 animation-deraction(默认值normal)、 animation-fill-mode(默认值none，确定动画在执行前后两个阶段的样式，可取值forwards元素样式保留最后一个关键帧的计算值、backwards动画将在应用于目标时立即应用第一个关键帧中定义的值、both)、 animation-play-state(默认值running)属性的一个缩写。

2. 后五个属性（1中的）只能出现零次或一次。

3.也可以用来指定一组或多组动画，每组动画用逗号隔开。

4.解析的第一个时间是animation-duration的值，第二个是animation-delay的值。

transition和animation属性如何抉择？

？？@keyframes定义的关键帧变化原理，和百分比的关系。