同时，如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。
我在css编写的时候，因为变化的属性只有transform一个，因此在transtion属性里面指定响应属性为all，可以响应并执行元素所有属性的变化动画（能做动画的属性）。
Animation
在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。
做过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。而css keyframes的出现，则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例：
复制代码
@keyframes ‘wobble'{
0%{
left:100px
}
30%{
left:300px;
}
100%{
left:500px;
}
}
.animate{
left:100px;
-webkit-animation:wobble 0.5s ease-out;
-webkit-animation-fill-mode:backwards;
}
上面这个代码展示了一个keyframes ‘wobble’，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.
另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。
总结
以上就是这篇文章的全部内容了，希望能对大家的学习或者工作带来一定的帮助。
