动画概述

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡(过渡可以说是一种简单的动画)，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本规则

制作动画分为两步：

先定义动画
在使用(调用)动画

首先定义动画，我们使用keyframes(类似定义类选择器)

keyframes译为关键帧，所以也叫关键帧动画

语法结构：

@keyframes 动画名称 {
 0%{
 	width:100px;
 } 
 100%{
 	width:200px;
 }
}

这里的0%和100%有专门的名字 – 动画序列

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

接下来是元素使用动画，在使用的时候有两个属性是必不可少的：

语法结构：

div {
 	width: 200px;
 	height: 200px;
 	background-color: aqua;
 	margin: 100px auto;
 	/* 调用动画 */
 	animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间;  /* 记得带单位 */
 }

动画的基本使用

现在我们来做一个小案例：一打开网页，一个红色的盒子就从左边飞到右边。

这里我们需要用到CSS3 2D转换中的translate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

代码实现如下：

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        animation-name: move;
        animation-duration: 2s;
    }

    /* @keyframes move {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(1000px);
        }
    } */

    @keyframes move {
        from {
            transform: translateX(0px);
        }
        to {
            transform: translateX(1000px);
        }
    }

    /* 这两种写法都可以 */

</style>
<body>
    <div></div>
</body>

利用动画序列完成多个状态的实现

我们现在有一个新需求，还是刚才那个盒子，但是我们想让他围着浏览器窗口走一圈，这我们怎么去实现呢？

原理图：

代码实现：

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        animation-name: move;
        animation-duration: 5s;
    }

    @keyframes move {
        0% {
            transform: translate(0px,0px);
        }
        25% {
            transform: translate(1000px,0px);
        }
        50% {
            transform: translate(1000px,500px);
        }
        75% {
            transform: translate(0px,500px);
        }
        100% {
            transform: translate(0px,0px);
        }
    }
</style>
<body>
    <div></div>
</body>

其实0%那个可以省略，或者干脆就空着：

如何理解百分比来规定变化发生的时间？
比如说在我们这个案例中，有五个状态，动画总时间为5秒钟
0% 意味着 5 X 0% = 0s 的时候动画处于第一状态
25% 意味着 5 X 25% = 1.25s 的时候动画处于第二状态
50% 意味着 5 X 50% = 2.5s 的时候动画处于第三状态
75% 意味着 5 X 75% = 3.75s 的时候动画处于第四状态
100% 意味着 5 X 100% = 5s 的时候动画处于第五状态

注意这个百分比必须为整数！

CSS3动画常见属性

动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state
暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction ： alternate
盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

有关速度曲线

animation-timing-function：规定动画的速度曲线，默认是“ease”

其中这个steps()不同于上面五种，它不是一种连续平滑的效果，而是一种状态的切换(类似于断点)

效果代码：

<style>
    div {
        overflow: hidden;
        font-size: 20px;
        width: 0;
        height: 30px;
        background-color: pink;
        /* 让我们的文字强制一行内显示 */
        white-space: nowrap;
        /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
        animation: w 4s steps(10) forwards;
    }
    
    @keyframes w {
        0% {
            width: 0;
        }
        100% {
            width: 200px;
        }
    }
</style>
<body>
    <div>CSDN我在这里等你</div>
</body>