CSS3：过渡动画 transition

前言：

transition 是网页上的过渡动画，在CSS3出现之前，网页上的动画大多是用 flash 实现的，但 flash 动画会产生很大的弊端，比如操作不便等等。

过渡 transition 是一个复合属性，包括 transition-property、transition-duration、transition-timing-function、transition-delay 四个子属性。

transition: property duration timing-function delay;

1、transition-property

该属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

过渡效果通常在用户将鼠标指针浮动到元素上时发生。

取值：

• none：没有属性会获得过渡效果
• all：所有属性都将获得过渡效果
• property：定义应用过渡效果的css属性名称列表，列表以逗号分隔

2、transition-duration

该属性的单位是秒s或毫秒ms。

注意：

• 该属性不能为负值
• 若该属性为 0s 则为默认值，若为 0 则为无效值。所以必须带单位
• 该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

3、transition-timing-function

过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果

取值：

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

cubic-bezier(0,0,1,1)

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

cubic-bezier(0.25,0.1,0.25,1)

• ease-in：以慢速开始的过渡效果

cubic-bezier(0.42,0,1,1)

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

cubic-bezier(0,0,0.58,1)

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

cubic-bezier(0.42,0,0.58,1)

• step-start: 直接位于结束处

steps(1,start)

• step-end: 位于开始处经过时间间隔后结束

steps(1,end)

• cubic-bezier(n, n, n, n) ：在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

4、transition-delay

该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms。

注意:

• 该属性若为负值，无延迟效果，但过渡元素的起始值将从 0 变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于 0，则无过渡效果；若该设定值大于 0，则过渡元素从该设定值开始完成剩余的过渡效果
• 若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
• 该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

示例：

<style>
div {
    width: 300px;
    height: 100px;
    padding-top: 20px;
    line-height: 100px;
    margin: 200px auto 0;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    font-family: '华文行楷';
    background: #000;
    color: #ff6600;
}
</style>

<div>好好学习，天天向上</div>

然后，给 div 加上 hover 效果

<style>
div:hover {
    text-shadow: 0px 0px 2px #fff,
          0px -3px 3px #1eb,
          0px -6px 4px #01defd,
          0px -12px 6px #08f;
}
</style>

当鼠标进入这个div时，文字阴影一瞬间出现

接着，我们修改hover效果

<style>
div {
    transition: all 1s liner 0s;
}
</style>

鼠标进入 div 时，背景阴影经过了 1s 的过渡过程。