您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　10.1.1 CSS3方式

　　CSS3的方式下，开发者一般在CSS中定义一些包含CSS3transition语法的规则。在某些特定情况下，让这些规则发生作用，于是浏览器就会将这些规则应用于指定的DOM元素上，产生动画的效果。

　　这种方式毫无疑问运行效率要比脚本方式高，因为浏览器原生支持，省去了Java Script的解释执行负担，有的浏览器（比如Chrome浏览器）甚至还可以充分利用GPU加速的优势，进一步增强了动画渲染的性能。

　　不过CSS3的方式并非完美，也有不少缺点。

　　首先，CSS3Transition对一个动画规则的定义是基于时间和速度曲线（Speed Curve）的规则。换句话来说，就是CSS3的动画过程要描述成“在什么时间范围内，以什么样的运动节奏完成动画”。

　　在本书的Github代码库https://github.com/mocheng/react-and-redux中的文件chapter-10/animation_types/css3_sample.html文件中可以找到一个简单例子来说明CSS3的工作方式，CSS代码如下：

　　.sample {

　　position: absolute;

　　left: 0px;

　　width: 100px;

　　height: 100px;

　　transition-property: left;

　　transition-duration: 0.5s;

　　transition-timing-function: ease

　　}

　　.sample:hover {

　　left: 420px;

　　}

　　在上面的例子中，sample类的元素定义了这样的动画属性：“left属性会在0.2秒内以ease速度曲线完成动画”。

　　transition只定义了动画涉及的属性、时间和速度曲线，并不定义需要修改的具体值。sample类的left属性默认值为0，当鼠标移到sample类元素上时，left属性就拥有新的值420px。这时候transition定义的规则发生作用，让left属性以ease速度曲线在0.2秒的时间完成从0变成420px的转化过程，这个过程中，用户看到的就是sample类元素向右移动420个像素的动画过程。

　　因为CSS3定义动画的方式是基于时间和速度曲线，可能不利于动画的流畅，因为动画是可能会被中途打断的，在上面的例子中，鼠标移到sample类元素上的时候开始动画，但是在0.2秒的动画时间内，用户的鼠标可能会移出这个sample类元素，这时候CSS3还会以ease速度曲线的节奏让sample类元素回到原位。从用户体验角度来说，中途sample类元素回到原位的动作，语义上是“取消操作”的含义，但却依然以同样的时间和ease节奏来完成“取消操作”的动画，这并不合理。

　　时间和速度曲线的不合理是CSS3先天的属性，更让开发者头疼的就是开发CSS3规则的过程，尤其是对transition-duration时间很短的动画调试，因为CSS3的transition过程总是一闪而过，捕捉不到中间状态，只能一遍一遍用肉眼去检验动画效果，用CSS3做过复杂动画的开发者肯定都深有体会。

　　虽然CSS3有这样一些缺点，但是因为其无与伦比的性能，用来处理一些简单的动画还是不错的选择。

　　React提供的ReactCSSTransitionGroup功能，使用的就是CSS3的方式来实现动画，在后面的章节会详细介绍。 深入浅出React和Redux