CSS3过渡

过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

先依次看一下它的各个转换属性：

过渡时间

transition-duration: 10s;

过渡效果的时间曲线

ease先慢后快

linear匀速

ease-in规定以慢速开始的过渡效果

ease-out规定以慢速结束的过渡效果

ease-in-out规定以慢速开始和结束的过渡效果

cubic-bezier（n,n,n,n）贝塞尔曲线*/

transition-timing-function: cubic-bezier(0.18, -0.61, 0.19, 1.46);

过渡效果的延迟时间

延迟1s，1s之后开始执行过渡，

-1s负数代表已经执行过1s了

transition-delay: -1s;

选择有过渡效果的属性，指定多个时用逗号隔开，指定所有属性时写all

transition-property: width,height;

复合写法：

transition:1s 2s all ease;后三个值可以省略

第一个值：过渡时间

第二个值：过渡延迟时间

第三个值：需要过渡的样式

第四个值：过渡方式

linear 匀速

ease 先慢后快

ease-in 慢速开始

ease-out 慢速结束

ease-in-out 开始和结束都慢

cubic-bezier 贝塞尔曲线

过渡的例子：

这个例子的大体意思就是，写了一个div给了一个初始样式，然后设置的过渡样式分别为：

过渡时间，过渡时间曲线，有过渡效果的属性

因为给了一个复合写法，所以覆盖了上面的设置

经过以上hover效果，div会从原来的：

变成：