CSS3(11) 用Transition实现过渡动画

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

一、定义和用法

transition属性是一个简写属性，用于设置四个过渡属性

transition: property duration timing-function delay;

1. transition-property

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

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

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

2. transition-duration

transition-duration属性规定完成过渡效果需要多少秒或毫秒。需要始终设置该属性，否则时长为0，就不会产生过渡效果。

3. transition-timing-function

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)）
cubic-bezier(n, n, n, n)	在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

4. transition-delay

transition-delay规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

---

二、使用案例

首先我们写一个字体出来

<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的过渡过程。

---

参考文献

1. 用css3的transition实现过渡动画