CSS3过渡

一、transition

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

语法：

transition:[transition-property  transition-duration  transition-timing-function   transition-delay ]

当我们知道语法是，我们要来了解一下这些属性表示的意思是什么

1、transition-property

property：指定的CSS属性（width、height、background-color属性等）

all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

2、transition-duration

duration：定义过渡效果花费的时间
允许取值：time值，它是以秒作单位，默认是0，意味着没有效果

3、transition-timing-function

timing-function：规定过渡效果的时间曲线

值	描述
linear	以相同的速度开始至结束，也就是匀速
ease	慢速开始，然后中间变快，最后以慢速结束的过渡效果
ease-in	慢速开始，快要结束的时候速度会变快的过渡效果
ease-out	快速开始，快要结束的时候速度会变慢的过渡效果
ease-in-out	慢速开始，中间匀速，最后以慢速结束的过渡效果

4、transition-delay

delay：规定效果开始之前需要等待的时间
允许的值：time值，以秒作单位，默认是0

---

以下就是小练习：

小视频