CSS3过渡

目录

一、定义

二、属性

2.1 transition-property

2.2 transition-duration

2.3 transition-delay

2.4 transition-timing-function

三、过渡复合写法

---

一、定义

transition的过渡就是平滑地改变一个元素的样式，使元素从一个样式逐渐过渡到另一个样式，是一种动画转换的过程，如渐现、渐弱、动画快慢等。

二、属性

2.1 transition-property

用于设置需要过渡的元素

例：让该元素的宽度属性值在改变的有过渡

transition-property: width;

2.2 transition-duration

定义过渡需要的事件，事件越长过渡越慢

例：让元素过渡时间为1秒

transition-duration:1s;

2.3 transition-delay

设置过渡延迟，让元素在设定的时间后才进行过渡

例：设置过渡延时2s

transition-delay:2s;

2.4 transition-timing-function

用于设置过渡的时间曲线

属性值有：

linear ：匀速过渡

ease：由慢到快再到慢

ease-in：慢速过渡

ease-out：以慢速结束的过渡

sase-in-oout：由慢速开始和结束的过渡

 

三、过渡复合写法

transition: 元素 过渡时间 延迟时间 过渡曲线;

例： 

transition: all 2s 0s linear;

实现元素所有属性过渡，并且过渡时间2s，延迟0，匀速过渡