css3新属性partD

对于页面的交互效果，css3为我们提供了更多的动画选择：
过渡transition属性：
语法：transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

除了上述统一的写法也可以分开写：
transition-property: width;（变型的css属性）
transition-duration: 1s;（变形维持的时间）
transition-timing-function: linear;（动作的快慢曲线）
transition-delay: 2s;（动作延迟的时间）

transform属性:
顾名思义的是元素的一种变形动作，这个属性我们结合过渡属性来一起看效果会更好，上代码！

平台不能截取gif图片所以大家可以自己试一下代码
还有很多关于变形属性的知识点，由于篇幅原因不是很能讲完 传送门

css3复杂动画，animation标签和keyframes，其实很多人都说这个点比较复杂难理解，但是我觉得在设计模式上是比较好理解的

这个动作体的意思是从红色到黄色，执行这个动作体的时间是匀速进行5秒钟
我们还可以通过这个来决定若干个元素在页面上的走向

从页面的左边匀速移动到距离距离上边框30px距离左边框30px的距离
在学过js之后我们也可以通过js去做到一样的效果，但是性能的消耗远远赶不上css3的动作具体原因在我们讲到js动画的时候会介绍。