CSS—动画之animation

目录

一、概述

二、详解

三、代码实例

---

一、概述

animation是CSS3新增的一个属性，可以设置元素的动画特效。

二、详解

animation定义和用法

animation是一个复合属性，适用于所有元素，包含伪对象:after和:before。如果提供多组属性值，中间用逗号隔开。

animation: animation-name||animation-duration||animation-timing-function
                ||animation-delay||animation-iteration-count||animation-direction;

animation属性值

animation-name:            设置元素对应的动画名称, 必须与规则@keyframes配合使用, 因为动画名称由@keyframes定义
animation-duration:        设置元素动画的持续时间
animation-timing-function: 设置元素动画的过渡类型
animation-delay:           设置元素动画的延迟时间
animation-iteration-count: 设置元素动画的循环次数
animation-direction:       设置元素动画在循环中是否反向运动

// animation-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]区间内

// animation-iteration-count属性值
infinite: 无限循环
<number>: 指定对象动画的具体循环次数

// animation-direction属性值
normal:    正常方向
alternate: 正常与反向交替

@keyframes规则

@keyframes规则用于创建动画，语法如下代码所示。@keyframes关键词后面跟动画的名称。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

/* Firefox */
@-moz-keyframes myfirst   
{
    from {background: red;}
    to {background: yellow;}
}

/* Safari 和 Chrome */
@-webkit-keyframes myfirst 
{
    from {background: red;}
    to {background: yellow;}
}

/* Opera */
@-o-keyframes myfirst 
{
    from {background: red;}
    to {background: yellow;}
}

/* ie*/
@-ms-keyframes myfirst 
{
    from {background: red;}
    to {background: yellow;}
}

三、代码实例

实例一：改变div背景颜色

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        animation: myfirst 1s ease 0s 2 alternate;
        -moz-animation: myfirst 1s ease 0s 2 alternate;
        -webkit-animation: myfirst 1s ease 0s 2 alternate;
        -o-animation: myfirst 1s ease 0s 2 alternate;
        -ms-animation: myfirst 1s ease 0s 2 alternate;
    }
    @keyframes myfirst
    {
        0% { background-color: red; }
        25% { background-color: yellow; }
        50% { background-color: blue; }
        75% { background-color: green; }
        100% { background-color: black; }
    }

    @-moz-keyframes myfirst
    {
        0% { background-color: red; }
        25% { background-color: yellow; }
        50% { background-color: blue; }
        75% { background-color: green; }
        100% { background-color: black; }
    }

    @-webkit-keyframes myfirst
    {
        0% { background-color: red; }
        25% { background-color: yellow; }
        50% { background-color: blue; }
        75% { background-color: green; }
        100% { background-color: black; }
    }
    @-o-keyframes myfirst
    {
        0% { background-color: red; }
        25% { background-color: yellow; }
        50% { background-color: blue; }
        75% { background-color: green; }
        100% { background-color: black; }
    }
</style>
<div></div>