【CSS】动画（Transform,Transition,Animation）

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。

transform

描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

div{
　　transform:scale(2);
}

transition和animation两者都能实现动画效果，transform常常配合transition和animation使⽤。

transition

样式过渡，从⼀种效果逐渐改变为另⼀种效果。

transition是⼀个合写属性：
transition:transition-property transition-duration transition-timing-function transition-delay。从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间。

div{
 width：100px;
 height:100px;
 transition:transform 2s;
}
div:hover{
 transform:rotate(180deg);
}

transition通常和hover等事件配合使⽤，需要由事件来触发过渡。

我们知道 transition 虽然简单好⽤，但是我们会发现它受到各种限制：

(1) transition需要⼀个事件来触发，⽐如hover，所以没法在⽹⻚加载时⾃动发⽣。
(2) transition是⼀次性的，不能重复发⽣，除⾮⼀再触发。
(3) transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
(4)⼀条transition规则，只能定义⼀个属性的变化，不能涉及多个属性。

animation

animation动画，由@keyframes来描述每⼀帧的样式。

div{
　　animation:myAnimation 5s infinite
}
@keyframes myAnimation {
　　0%{left:0;transform:rotate(0);}
　　100%{left:200px;transform:rotate(180deg);}
}

---

区别：

（1）transform仅描述元素的静态样式，常常配合transition和animation使⽤。
（2）transition通常和hover等事件配合使⽤，animation是⾃发的，⽴即播放。
（3）animation可设置循环次数。
（4）animation可设置每⼀帧的样式和时间，transition只能设置头尾。
（5）transition可与js配合使⽤，js设定要变化的样式，transition负责动画效果。

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：

• transition需要触发⼀个事件才会随着时间改变其CSS属性；
• animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到⼀种动画的效果。

1）动画不需要事件触发，过渡需要。
2）过渡只有⼀组（两个：开始-结束） 关键帧，动画可以设置多个。