CSS—动画之transition

目录

一、概述

二、详解

三、代码实例

---

一、概述

transition是CSS3新增加的属性，可以为同一元素的多个属性定义过渡动画。

二、详解

transition的定义和用法

transition是一个复合属性，用于设置元素的过渡动画，适用于所有元素，包括伪对象:after和:before，定义如下。

transition：transition-property||transition-duration||transition-timing-function||transition-delay

// 缩写方式
transition:width .5s ease-in .1s, background-color .5s ease-in .1s;

// 拆分方式
transition-property: width, background-color
transition-duration: .5s, .5s;
transition-timing-function: ease-in, ease-in;
transition-delay: .1s, .1s;

如果定义了多个过渡属性，而其它属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值，据此可以对上面的例子进行缩写，如下所示。

transition-property: width, background-color
transition-duration: .5s;
transition-timing-function: ease-in;
transition-delay: .1s;

如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其它属性只有一个参数值，据此可以对上面的例子进行缩写，如下所示。

transition:all .5s ease-in .1s;

transition的子属性

transition-property:        设置元素中参与过渡的属性, all表示所有属性
transition-duration:        设置元素过渡的持续时间
transition-timing-function: 设置元素过渡的动画类型, 常用的有linear(匀速)、ease(缓冲运动)
transition-delay:           设置元素延迟过渡的时间

//  transition-timing-function属性值
linear:      线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:        平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:     由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:    由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>): 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

transition的兼容性

                      

三、代码实例

实例一：鼠标悬浮在圆形div上使之变大

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        transition: width 1s ease, height 1s ease, background-color 1s ease;
        -moz-transition: width 1s ease, height 1s ease, background-color 1s ease;
        -webkit-transition: width 1s ease, height 1s ease, background-color 1s ease;
        -o-transition: width 1s ease, height 1s ease, background-color 1s ease;
        -ms-transition: width 1s ease, height 1s ease, background-color 1s ease;
    }
        
    div:hover {
        width: 500px;
        height: 500px;
        background-color: aquamarine;
    }
</style>
<div></div>

实例二：鼠标移入图片时, 图片说明滑入的效果

<!--鼠标移入图片时, 图片说明滑入的效果-->
<style>
    .bg {
        width: 200px;
        height: 240px;
        background-color: red;
        overflow: hidden;
    }
        
    .desc {
        height: 120px;
        background-color: aquamarine;
        color: #fff;
        margin-top: 240px;
        transition: margin-top 1s ease 0.5s;
        -moz-transition: margin-top 1s ease 0.5s;
        -webkit-transition: margin-top 1s ease 0.5s;
        -o-transition: margin-top 1s ease 0.5s;
        -ms-transition: margin-top 1s ease 0.5s;
    }
        
    .bg:hover .desc {
        margin-top: 120px;
    }
        
    .clearfix:before {
        content: '';
    }
</style>
<div class="bg clearfix">
    <div class="desc clearfix">
        <h1>文字标题</h1>
        <p>鼠标移入图片时, 图片说明滑入的效果</p>
    </div>
</div>

实例三：背景颜色过渡

<style>
    h1 {
        font-size: 16px;
    }
    .test {
        overflow: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .test li {
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 5px;
        border: 1px solid #ddd;
        background-color: #eee;
        text-align: center;
        -moz-transition: background-color .5s ease-in;
        -webkit-transition: background-color .5s ease-in;
        -o-transition: background-color .5s ease-in;
        -ms-transition: background-color .5s ease-in;
        transition: background-color .5s ease-in;
    }
    .test li:nth-child(1):hover {
        background-color: #bbb;
    }
    .test li:nth-child(2):hover {
        background-color: #999;
    }
    .test li:nth-child(3):hover {
        background-color: #630;
    }
    .test li:nth-child(4):hover {
        background-color: #090;
    }
    .test li:nth-child(5):hover {
        background-color: #f00;
    }
</style>
<h1>请将鼠标移动到下面的矩形上：</h1>
<ul class="test">
    <li>背景色过渡</li>
    <li>背景色过渡</li>
    <li>背景色过渡</li>
    <li>背景色过渡</li>
    <li>背景色过渡</li>
</ul>