1:  很多的资料会把 transform 和 transition 同时直接归类为动画，的确，从很多实际使用的例子中看，transform 和 transition 都表现出动画的特征，但实际上，它       们仍有很大的区别：

2:  transform 和 transition 需要经过用户触发才会表现出动态的效果，这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是             click、focus 等 JavaScirpt 事件，如果没有设置触发条件而直接给元素设置 transform 或 transition ，用户只能看到元素的终态而没有动画过程。animation 则无       须触发条件，开发者只需为元素绑定动画即可。

3:  另外，在旧版本的 animation 中，animation 、transform 以及 transition 都有一个重要的性质——过程执行完毕后会回撤，例如以 :hover 触发 transform ，在鼠       标离开元素后动画自动反向播放，使到元素回到 transform 之前的状态，animation 也会在动画结束后回滚，但不会反向播放动画，而是直接跳到动画播放之前       的动态。

4:  但是，经过修订，animation 增加了一个很重要的属性 animation-fill-mode ，这个属性控制设置动画之外的状态，即元素在动画开始前后的状态是否根据动画设       置中“0%”、“100%”的状态设置，animation-fill-mode 的值可以为 none、forwards、backwards 或 both ，默认为 none ，即动画过程中“0%”、“100%”的状态不        设置为元素开始和结束的状态，backwards 和 forwards 则分别设置开始和结束的状态，both 则同时设置两个的状态，例如上面平移元素的例子，若加入                  forwards 属性，则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。读者可以根据下面的 Demo 对比两者的不同之处。

5:  有了这个属性，animation 动画也就更加完整了，虽然没有了这个属性，开发者仍可以设置出自己需要的效果，但是 animation 是需要配合其他 CSS 属性设置        会有最终的效果，若没有了这个属性设置动画将会复杂很多。

1:  很多的资料会把 transform 和 transition 同时直接归类为动画，的确，从很多实际使用的例子中看，transform 和 transition 都表现出动画的特征，但实际上，它       们仍有很大的区别：

2:  transform 和 transition 需要经过用户触发才会表现出动态的效果，这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是             click、focus 等 JavaScirpt 事件，如果没有设置触发条件而直接给元素设置 transform 或 transition ，用户只能看到元素的终态而没有动画过程。animation 则无       须触发条件，开发者只需为元素绑定动画即可。

3:  另外，在旧版本的 animation 中，animation 、transform 以及 transition 都有一个重要的性质——过程执行完毕后会回撤，例如以 :hover 触发 transform ，在鼠       标离开元素后动画自动反向播放，使到元素回到 transform 之前的状态，animation 也会在动画结束后回滚，但不会反向播放动画，而是直接跳到动画播放之前       的动态。

4:  但是，经过修订，animation 增加了一个很重要的属性 animation-fill-mode ，这个属性控制设置动画之外的状态，即元素在动画开始前后的状态是否根据动画设       置中“0%”、“100%”的状态设置，animation-fill-mode 的值可以为 none、forwards、backwards 或 both ，默认为 none ，即动画过程中“0%”、“100%”的状态不        设置为元素开始和结束的状态，backwards 和 forwards 则分别设置开始和结束的状态，both 则同时设置两个的状态，例如上面平移元素的例子，若加入                  forwards 属性，则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。读者可以根据下面的 Demo 对比两者的不同之处。

5:  有了这个属性，animation 动画也就更加完整了，虽然没有了这个属性，开发者仍可以设置出自己需要的效果，但是 animation 是需要配合其他 CSS 属性设置        会有最终的效果，若没有了这个属性设置动画将会复杂很多。