css动画的基本使用方法

风哑

已于 2022-05-27 01:01:39 修改

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端_css效果文章标签：动画 css css3

于 2022-03-11 18:13:14 首次发布

本文链接：https://blog.youkuaiyun.com/A_Common_Man/article/details/123420609

前端_css效果专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中animation动画与transform属性的区别，animation能自动播放并可控制，而transform需手动触发。文章通过实例展示了如何定义和调用动画，并解释了各种关键帧语法和动画属性。此外，还提到了动画的暂停方法以及相关的重要动画属性值，如速度曲线、重复次数等。最后，给出了一个简单的动画效果展示。

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

提问：animation动画与transform属性的区别

回答：比起transform需要手动触发，animation动画是自动播放的，并且可控，可循环播放，功能更加强大

接下来看一下动画实现的步骤：

第一步：定义动画

    /* 方法一 */

    @keyframes  动画名{

         from{}

         to{}
    }

    /* 方法二*/

    @keyframes  动画名{

        0%{
          }
        50%{
          }
        100%{
          }
    }

    /* 例子 */
    @keyframes font {
      45%{
        transform: rotate(360deg) scale(3.5) 
      }
      80%{
        transform:  scale(2.7);
      }
      90%{
        transform:  scale(1.6);
      }
      100%{
        transform: scale(1.5);
      }
    }

注意：方法二中是%到100%都是可以定义的，在这里我只演示了三个值。如果动画开始时没有明显的变化，则0%和from{}可以省略不写。

第二步：调用动画

/* 语法提示 */ 
animation: name duration timing-function delay iteration-count direction fill-mode;

/* 举例*/
    .font{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      animation: font 1s  linear ;
    }

在css属性中，通过animation这个属性来调用动画

语法结构： animation：动画名称(必写) 动画时长(必写) 速度曲线延迟时间重复次数动画方向执行完毕时的状态

注意：取值不分先后顺序，如果有两个时间值，那么第一个时间表示动画时长，第二个时间表示动画播放的延迟时间

提醒:要想让运动的动画鼠标经过时停止，需要在运动的元素的选择器的hover伪类选择器里设置 animation-play-state: paused;

代码展示：

<!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>
  <!-- 动画比过渡的优点在于,可以不需要手动操作就能实现自动播放和循环播放 过程可控 运动完之后停留在结束状态 -->
  <!-- 动画的使用分为两步:
  1.定义动画 动画名字可以自定义，理解成取类名
  2.使用动画 -->
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: #eee8aa;
      margin: 100px auto;
      /* 使用动画 */
      /* 属性名： 动画名(必写) 运动时间(必写) 速度曲线 延迟时间 运动次数(infinite是无限的意思) 运动方向 执行完毕时的状态  */
      /* 速度曲线：linear（匀速线性运动） ease-in-out(开始和结束慢) */
      /* 运动方向：alternate 逆向播放 回来的那一次也算一次次数 */
      /* 结束状态：forward(停留在结束状态) 默认停留在起始状态 */
      animation: yundong 3s  2 linear forwards alternate;    
    }
    .box:hover{
      animation-play-state: paused;
    }
    /* 定义动画 */
    @keyframes yundong{
      form{
      }
     to{
      transform: translateX(600px) rotatey(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <h2>简单动画</h2>
  </div>
</body>
</html>

效果展示：

**目前用到的动画属性值**
类别	属性值	作用
曲线速率	linear	匀速线性运动
曲线速率	steps(数字)	逐帧动画(一般配合精灵图使用）
曲线速率	ease-in-out	慢速开始和结束
动画次数	number	定义运动的次数，默认是一次
动画次数	infinite	无限运动（~~反复横跳不是）~~
动画方向	alternate	逆向运动(运动次数需要大于1才能看出效果)
动画终点	none(默认值)	默认终点是原点
动画终点	forwards	在运动结束的之后，停到结束位