CSS3过渡 transition

（1）如何实现？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。使用transition来实现。

格式：
transition:要过渡的属性 花费时间 运动曲线 何时开始
属性（必须）：property想要变化的css属性，宽度高度，背景颜色，转换，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以

花费时间（必须）：duration单位是秒（必须写单位）比如0.5s

运动曲线：timing-function单位是ease（可以省略）

何时开始：delay单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

实例1：应用于宽度属性的过渡效果，时长为 2 秒，当鼠标光标移动到该元素时，它逐渐改变它原有样式
div {    transition: width 2s;    /* IE9以下不支持 */-webkit-transition: width 2s; /* Safari */
}
?
div:hover {width:300px;
}

（2）过渡属性

属性描述 CSS

transition 简写属性，用于在一个属性中设置四个过渡属性。 3

transition-property 规定应用过渡的 CSS 属性的名称。 3

transition-duration 定义过渡效果花费的时间。默认是 0。 3

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3

transition-delay 规定过渡效果何时开始。默认是 0。 3

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

(3) 运动曲线 transition-timing-function属性值如下表：

值描述

linear 规定以相同速度开始至结束的过渡效果

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果

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

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

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

值	描述
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果

(4) 使用了全部属性：

div {transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;
}

(5) 简写的 transition 属性，格式如下：

transition: property  duration  timing-function  delay
div {transition: width 1s linear 2s;/* Safari */-webkit-transition:width 1s linear 2s;
}

（6）多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔：

div {transition: width 2s, height 2s, transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05-transition</title><style>.fa {width: 400px;height: 400px;border: 1px solid black;perspective: 200px;margin: 0 auto;}.sn {width: 100px;height: 100px;background-color: red;transition: width 2s linear, height 3s ease 2s, transform 3s ease-in 3s;}.fa:hover .sn{width: 360px;height: 360px;transform: translate3d(100px, 100px, 100px);}</style>
</head>
<body><!-- transition:要过渡的属性 花费时间 运动曲线 何时开始/延迟  --><div class="fa"><div class="sn"></div></div>
</body>
</html>