css3 过渡和动画

过渡 transition

1.过渡的定义和使用

在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式在一定的时间内，从旧的样式转变成新的样式，而这个过程就是过渡。过渡其实就是一个简单的动画效果

transition是简写之后的属性名，它其实是4个属性合并而成的，按顺序依次是：
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

注意：添加的属性他的属性值必须有明确的数值，例如color，left，width之类的，如果是display这种则无效

transition我们很少拆分使用，通常都是简写
所有属性过渡

transition: all 1s;

多个属性过渡,各个属性用 逗号 隔开

transition: width 1s,height 1s;

设置延迟和过渡函数

transition: width 2s ease 1s;

2.过渡的时间函数

常用的值有：
ease - 先快后慢