css动画效果（关键帧）

comegoing-归去兮来

已于 2023-12-06 15:50:26 修改

阅读量3.1k

点赞数 2

分类专栏：前端css基础文章标签： css 前端 html 动画

于 2022-09-01 21:17:02 首次发布

本文链接：https://blog.youkuaiyun.com/comegoing_xin_lv/article/details/126651421

版权

前端css基础专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了CSS3动画的使用方法，包括keyframes创建动画效果，关键帧的设定，以及新增的动画属性如重复次数、运动方向、执行状态和填充模式。通过实例代码展示了如何在HTML中实现动画并调整各种参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用方式

1、keyframes

（1）通过在style标签中创建keyframes的方式创建动画效果，keyframes后跟自定义名字，如下代码

@keyframes test {
        from {
          margin-left: 0;
          background-color: orange;
        }
        to {
          margin-left: 700px;
          background-color: red;
        }
}

2、关键帧

（1）动画开始，用from，里面包含动画的初始状态

（2）动画结束，用to，里面包含动画的结束状态

（3）可以通过百分比的方式添加动画的中间状态，比如33%等

二、常用属性

1、基本属性

与过渡效果相同，只需要替换名称，参考本文

https://blog.youkuaiyun.com/comegoing_xin_lv/article/details/126651255?spm=1001.2014.3001.5501

2、新增属性

（1）重复次数（animation-iteration-count）

--可设置数值

--也可设置为无限次，infinite

（2）运动方向（animation-direction）

--normal 是正常运动

--reverse 反向运动

--alternate 运动完后，动画返回

--alternate-reverse 反向运动完后，动画返回

（3）动画执行状态（animation-play-state）

--running正在执行

--paused暂停

（4）动画填充模式（animation-fill-mode）

--none 默认值，动画执行完毕后回到初始位置

--forwards 动画执行完毕后停止在结束位置

--backwards 动画执行时，在延迟状态时就会转变为开始状态，而仅仅延迟时，只有运行开始时，才会变为开始状态

三、代码

1、动画效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画效果</title>
    <style>
      @keyframes test {
        from {
          margin-left: 0;
          background-color: orange;
        }
        to {
          margin-left: 700px;
          background-color: red;
        }
      }
      .box1 {
        width: 800px;
        height: 800px;
        background-color: silver;
      }
      .box2 {
        background-color: #bfa;
        width: 100px;
        height: 100px;
        animation-name: test;
        animation-duration: 2s;
        /* 重复次数，可设置数值，也可设置为无限次 */
        animation-iteration-count: infinite;
        /* 运动方向
            normal 是正常运动
            reverse 反向运动
            alternate 运动完后，动画返回
            alternate-reverse 反向运动完后，动画返回
            */
        animation-direction: alternate-reverse;
        /* 
            动画执行状态
            running正在执行
            paused暂停
            */
        animation-play-state: running;

        /* 
            动画填充模式
            none 默认值，动画执行完毕后回到初始位置
            forwards 动画执行完毕后停止在结束位置
            backwards 动画执行时，在延迟状态时就会转变为开始状态，而仅仅延迟时，只有运行开始时，才会变为开始状态
            */
        animation-fill-mode: none;
      }
      .box3 {
        background-color: #bfa;
        margin-top: 200px;
        width: 100px;
        height: 100px;
        animation-name: test;
        animation-duration: 2s;
      }
      .box1:hover .box2 {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

2、关键帧

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关键帧</title>
    <style>
      @keyframes ball {
        from {
          margin-top: 0px;
        }
        33% {
          margin-top: 400px;
        }
        66% {
          margin-top: 300px;
        }
        to {
          margin-top: 400px;
        }
      }
      .box {
        background-color: silver;
        width: 500px;
        height: 500px;
        border-bottom: solid 10px black;
        overflow: hidden;
      }
      .box div {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        float: left;
        animation-name: ball;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
      }
      .box1 {
        background-color: red;
        animation-delay: 0.1s;
      }
      .box2 {
        background-color: blue;
        animation-delay: 0.2s;
      }
      .box3 {
        animation-delay: 0.3s;
        background-color: orange;
      }
      .box4 {
        animation-delay: 0.4s;
        background-color: yellow;
      }
      .box5 {
        animation-delay: 0.5s;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
      <div class="box5"></div>
      <div class="box6"></div>
    </div>
  </body>
</html>