CSS-Animation&Transition

Animation

animation动画

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0，0s意味着动画没有时间，持续时间不能为负值。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。该延迟时间是指整个动画的延迟时间，而不是每个循环的延迟时间，只在动画开始时进行一次时间延迟。如果该值是负值，则表示动画的起始时间从0s变为延迟时间的绝对值。	3
animation-iteration-count	规定动画被播放的次数。默认是 1，可以是整数也可以小数，但不能是0和负数。如果为infinite则表示无限次动画。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"，running表示播放中，paused表示动画暂停。	3

补充如下：

animation-direction: 动画方向(默认值为normal)

animation-fill-mode: 填充模式(默认值为none)

none: 动画结束后，元素移动到初始状态
注意：初始状态并不是指0%的元素状态，而是元素本身属性值
forwards: 元素停在动画结束时的位置
注意：动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数
backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同
注意：动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。
both: 同时具有forwards和backwards的效果

关键帧：

animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画

关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式

transition动画

语法：transition: property duration timing-function delay;

默认值：all 0 ease 0；

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

主要区别是

初学者一枚，如有问题欢迎指正~