CSS动画 animation与transition

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

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

transform(变形)是CSS3中的元素的属性

translate是transform的一个属性值

而 transform是transition（过渡动画）的transition-property的一个属性值

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

transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。可以认为它有两个关键帧（Transition ＋ Transform ＝ 两个关键帧的Animation）。

1 、触发方式

伪类触发：:hover : focus :checked :active

js触发：toggleClass

2、以下情况下，属性值改变不能产生过渡效果

background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等，浏览器支持情况

float浮动元素

height或width使用auto值

display属性在none和其他值（block、inline-block、inline）之间变换

position在stativ和absolute之间变换

---

本文首发于HopeFu博客网站：www.fjfblog.com