CSS变换-3.动画

3.1定义关键帧

CSS使用动画，需要先定义关键帧，第一种语法如下：

@keyframes keyframesName{
    from{
        /*property:value*/
    }
    to{
        /*property:value*/
    }
}

注意：keyframesName是自定义的名称，可以是任意合法的名字。

property:value是指元素的属性名和属性值。

第二种语法如下：

@keyframes keyframesName{
    0%{
        /*property:value*/
    }
    20%{
        /*property:value*/
    }
    60%{
        /*property:value*/
    }
    100%{
        /*property:value*/
    }
}

用百分比可以更精细得控制动画，注意第一种写法中也可以夹杂第二写法，如下：

@keyframes keyframesName{
    from{
        /*property:value*/
    }
    20%{
        /*property:value*/
    }
    60%{
        /*property:value*/
    }
    to{
        /*property:value*/
    }
}

3.2 给元素添加动画相关属性

定义关键帧之后，还需要给元素添加相关属性，才能有动画效果，常用属性有：

**animation-name：**给元素指定具体的动画（必要的属性，具体的关键帧，就是前面说的keyframesName）

**animation-duration：**设置动画所需时间，必要属性。

**animation-delay：**动画延迟时间，即元素从多长时间后开始产生动画效果。不是必要属性，默认立即开始。

如下代码示意一个盒子在容器盒子中从左边到右边：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画演示</title>
    <style>
        .outer{
            width: 600px;
            height: 100px;
            background-color: gray;
            overflow: hidden;
        }
        .inner{
            height: 50px;
            width: 50px;
            margin-top: 25px;
            background-color: red;
            /* 添加动画 */
            animation-name: move;
            /* 设定动画时长 */
            animation-duration: 5s;
        }
        /* 定义关键帧 */
        @keyframes move{
            from{
            }
            to{
                /* 设定位移 */
                transform: translateX(550px);
            }
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

运行效果如下：

以上便是一个最简单的动画了。

3.3 动画的其他属性

3.3.1 设置动画的类型

animation-timing-function属性可以设置动画的类型，常用值如下：

属性值	含义	效果示意图
ease	平滑动画 —— 默认值
linear	线性过渡
ease-in	慢 → 快
ease-out	快 → 慢
ease-in-out	慢 → 快 → 慢
step-start	等同于 steps(1, start)
step-end	steps(1, end)
steps( integer,?)	接受两个参数的步进函数。第一个参数必须为正整数，指定指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间。	animation-timing-function: steps(10,start);
cubic-bezie ( number, number, number, number)	特定的贝塞尔曲线类型。一共四个参数，第一个和第三个必须为0-1之间的数。在线制作贝赛尔曲线：https://cubic-bezier.com	cubic-bezier(.5,2.29,.62,.4);