css—动画

一、背景

本文章是用于解释上一篇文章中的问题，如果会动画的小伙伴就不用再次来看了，本文主要讲解一下动画的设定规则，以及如何在元素中添加动画，本文会大篇幅的讲解一下，动画属性。注意，这是css3的内容，默认认为已经了解了css的知识。

二、如何配置动画规则

关于如何定制动画规则，想必看过我的轮播图那篇文章的小伙伴们已经不陌生了，接下来我就简单的说一下如何去定制动画规则。

1、首先动画规则是通过@keyframes 动画名【注意动画名称任意，但是建议见名知意】。

2、在动画名称之后使用花括号来定义相关的规则，例如让盒子的宽高变化，或者是移动元素。

3、定制的阶段可以分为简单的写法，但是有缺点，只能设置开始和结束的状态。

4、另一种就是相对复杂的百分比写法，相对复杂，但是更灵活，建议使用百分比定制，但是还是要根据实际情况选择，这里不做限制。

1、简单写法

@keyframes animation {
    from{
        元素开始的状态
    }
    to{
        元素目标状态
    }
}

2、百分比

@keyframes animation {
    0%{
        状态一【开始状态】
    }
    25%{
        状态二
    }
    50%{
        状态三
    }
    75%{
        状态四
    }
    100%{
        状态五【目标状态】
    }
}

注意：当使用百分比写法的时候阶段是可以自由拆分的，同样也是根据具体情况具体定制。

三、相关属性介绍

关于属性方面我们先来说一下基本的一些属性，大家肯定有一个疑惑，动画规则有了，但是如何添加到元素上呢，那么接下来就来聊一聊如何去为元素添加动画规则。

1、基本属性使用

1、首先添加动画规则，需要使用animation-name来声明动画的名称，也就是动画规则中的名称。

2、那么动画一定是有时间的，所以接下来了就需要设定时间，时间是通过animation-duration来设定的，值的单位是秒【s】或者毫秒【ms】。

以上就是动画的基本使用，如果你只是想回忆一下自己学过的动画知识，那么想必看到这里已经想起来不少了，如果你是小白，那么继续阅读下去，相信会给你带来不菲的价值。

2、其他属性的使用

刚刚介绍完两个基本的属性，有了以上的两个属性，再加上动画规则，就可以做到一个简单的动画，但是我们的目的也一定不是简简单单的让元素动一下，那和过渡属性又有什么区别呢，那么接下来就一起来看一下，动画的其他有趣的属性。

1、animation-delay

这是一个延时属性，就像是他的字面意思，这个属性会让动画在开始的时候延长一段时间之后，再开始动画的播放，接下来演示一下。

 <body>
    <div class="box"></div>
  </body>

 <style>
      .box {
        width: 100px;
        height: 100px;
        background: orange;
        animation-name: moveR;
        animation-duration: 2s;
        animation-delay: 2s;
      }
      @keyframes moveR {
        0% {
          transform: translateX(0);
        }
        20% {
          transform: rotate(360deg);
          background: pink;
        }
        50% {
          background: blue;
          border-radius: 50%;
        }
        to {
          transform: translateX(1000px);
          background: red;
        }
      }
    </style>

效果展示：

延迟属性就说到这里。

2、animation-timing-function

这个属性是用来定义过渡形式的，用来固定元素的动画节奏。

选择器 {

animation-timing-function:

ease(慢快慢,默认值)

linear(匀速)

ease-in(先慢后快)

ease-out(先快后慢)

ease-in-out(慢快慢，相对于ease更慢一点)

step-start(不考虑过渡时间直接就是终点)

step-end(过渡时间到直接到终点)

steps(数值)(步长，一段一段的过渡)

cubic-bezier(.88,.54,.35,1.79)贝塞尔曲线

这个属性就不做演示喽，把这个机会留给大家，这个属性和transition中的过度形式是一样的。

3、animation-interation-count

这个属性是用来定义动画播放次数的，可以是1次，或者是多次，也有一些固定的属性，例如：infinite，这个属性值的意思就是动画会一直运动。具体使用可以看css—轮播图实现-CSDN博客文章浏览阅读636次，点赞6次，收藏18次。CSS样式来实现图片的切换效果。它不依赖于JavaScript，运行速度较快，并且具有较好的兼容性。https://blog.csdn.net/m0_64387122/article/details/144049330?spm=1001.2014.3001.5502这篇文章就使用到了这个属性，大家可以去看一下，也是可以学习到一些知识的。

4、 animation-direction

这个属性是用来定义动画的运动方向的

animation-direction: normal(左到右，默认值)/reverse(反向)/alternate(来回滚动)/alternate-reverse(反向来回滚动)

从左到右，和反向，也就是从右到左，就不进行演示了，还是比较好理解的，接下来就来演示一下来回滚动。

接下来我们来看一下代码：

<body>
    <div class="box"></div>
  </body>

<style>
      .box {
        width: 100px;
        height: 100px;
        background: orange;
        animation-name: moveR;
        animation-duration: 2s;
        animation-iteration-count: 3;
        animation-direction: alternate;
      }
      @keyframes moveR {
        0% {
          transform: translateX(0);
        }
        20% {
          transform: rotate(360deg);
          background: pink;
        }
        50% {
          background: blue;
          border-radius: 50%;
        }
        to {
          transform: translateX(1000px);
          background: red;
        }
      }
    </style>

其中的animation-direction: alternate;属性就是控制元素来回滚动的重要环节。

5、 animation-fill-mode

这个属性是用来定义动画以外的状态，也就是动画最后会停在那里？

结构：

animation-fill-mode: forwards(停止在最后一帧)/backforwards(停止在第一帧)

这里就不延时停在第一帧了，这是默认的。接下来我就来演示一下停止在最后一帧。效果如下：

<body>
    <div class="box"></div>
  </body>

<style>
      .box {
        width: 100px;
        height: 100px;
        background: orange;
        animation-name: moveR;
        animation-duration: 2s;
        animation-fill-mode: forwards;
      }
      @keyframes moveR {
        0% {
          transform: translateX(0);
        }
        20% {
          transform: rotate(360deg);
          background: pink;
        }
        50% {
          background: blue;
          border-radius: 50%;
        }
        to {
          transform: translateX(1000px);
          background: red;
        }
      }
    </style>

6、animation-play-state

这个属性是用来定义动画播放状态的。

结构：

animation-play-state: paused(暂停)/running(运行，默认值)

默认值是运行状态的，所以同样不做演示，只演示暂停的使用，搭配hover伪类可以实现交互的效果。效果如下：

<style>
      .box {
        width: 100px;
        height: 100px;
        background: orange;
        animation-name: moveR;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
      }
      @keyframes moveR {
        0% {
          transform: translateX(0);
        }
        20% {
          transform: rotate(360deg);
          background: pink;
        }
        50% {
          background: blue;
          border-radius: 50%;
        }
        to {
          transform: translateX(1000px);
          background: red;
        }
      }
      .box:hover {
        animation-play-state: paused;
      }
    </style>

从效果中可以清楚的看到，当鼠标放在元素上时会静止元素的运动。