css动画(详解)

你是否惊讶于为啥别人的网站效果那么好，自己的只有简单的布局，和图片加持。没事，这篇博客将带你了解制作动画，让你的网页变得更加生动。

动画的制作：

制作动画，我们需要选择动画的类型，这里我采用的是使用keyframes类型的关键帧动画，

定义一个动画

@keyframes 动画名称{
    关键帧的相应执行操作
}

这里执行的相应操作主要是这个动画的每一帧的执行方法

例如

@keyframes move {
    0%{
        width: 100px;
        height: 100px;
    }
    100%{
        width: 50px;
        height: 50px;
    }
}

动画的起始状态是宽高是100px,终止的状态时宽高50px。当然，你完全可以添加其他的效果，比如说 transform:translate（0px 10px）;让他直接沿y轴👇移动10px

动画的添加

如果说你只定义了一个动画，并没有指定盒子去实现它，那么这就是一个悲剧了

添加动画需要学习一下一个新的属性animation

基本组成：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name：指定关键帧动画的名称，对应于@keyframes中定义的动画名称。
duration：指定动画从开始到结束所花费的时间，以秒（s）或毫秒（ms）为单位。例如，2s表示2秒，500ms表示500毫秒。
timing-function：指定动画的速度曲线，控制动画在整个持续时间内的变化速度。常见的取值包括ease（默认值，缓慢开始，然后加速，最后减速）、linear（匀速）和ease-in-out（缓慢开始和结束，中间加速）等。
delay：指定动画在触发之后延迟多久开始播放，以秒（s）或毫秒（ms）为单位。
iteration-count：指定动画播放的次数，可以是一个整数（比如2表示播放两次），也可以是infinite表示无限循环播放。
direction：指定动画是否反向播放，常见取值有normal（默认值，正向播放）、reverse（反向播放）和alternate（交替正向和反向播放）等。
fill-mode：指定动画在播放前和播放后的行为，常见取值包括forwards（在播放结束时保持最后一个关键帧的状态）和backwards（在播放前应用第一个关键帧的状态）等。
play-state：指定动画的播放状态，可以是running（默认值，播放状态）或paused（暂停状态）

1.动画名称，相当于把指定名字的动画添加到这个盒子上

2.持续时间，整个动画的持续时间

3.速度曲线，指的是动画的每个区间的移动速度

4.动画延迟，指的是等待多长时间执行动画

5.播放次数，相当于为动画添加一个指定次数的循环

6.动画方向，指的是首次动画执行结束时，再次执行的方向

8，动画的播放状态，用于暂停，或者是恢复状态。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        @keyframes move {
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(0,-100px);
            }
            50%{
                transform: translate(0,0px);
            }
            75%{
                transform: translate(0,-100px);
            }
            100%{
                transform: translate(0,0px);
            }
        }   
        .head{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin:100px auto;
            animation: move 3s ease infinite;
        }
    </style>
</head>
<body>
    <div class="head">

    </div>
</body>
</html>

大家使用一下这段代码就可以知道具体效果了。

实例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        @keyframes move {
            0%{
                background-color:red;
            }
            25%{
                background-color:blue;
            }
            50%{
                background-color: black;
            }
            75%{
                background-color: rgb(217, 132, 20);
            }
            100%{
                background-color: yellow;
            }
        }   
        .head{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin:100px auto;
            animation: move 5s ease infinite;
        }
    </style>
</head>
<body>
    <div class="head">

    </div>
</body>
</html>