CSS动画 animation与transition

一、区分容易混淆的几个属性和值

　　先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。

　　CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；

　　transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；transform是transition（过渡动画）的transition-property的一个属性值。　　　　transform文章链接CSS3中transform几个属性值的注意点

 

　　animation（动画）、transition（过渡）是css3中的两种动画属性。animation强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用）；

　　transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动

画。可以认为它有两个关键帧（Transition ＋ Transform ＝ 两个关键帧的Animation）。