HTML5+CSS3-基础07-animation动画_animation html-CSDN博客

本文深入讲解CSS3中的@keyframes规则，演示如何创建逐帧动画，包括动画名称、持续时间、速度曲线等关键属性的设置，并通过实例展示了动画在网页元素上的应用。

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

HTML5+CSS3-基础07-animation动画

animation动画

animation动画

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。

1. @keyframes

@keyframes animationName {
    from {
        属性：属性值
        ...
    }
    百分比% (可多个){
       属性：属性值
        ...
    }
    to {
        属性：属性值
        ...
    }
}
//or
@keyframes 动画名字 {
    0% {
       属性：属性值
        ...
    }
   百分比% (可多个) {
       属性：属性值
        ...
    }
    100% {
        属性：属性值
        ...
}

2.animation-name

它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：

3.animation-duration

它是用来设置动画的持续时间，单位为s，默认值为0：

4.animation-timing-function

用来设置动画的速度曲线：ease | linear | ease-in | ease-out | ease-in-out

在这里插入图片描述
5.animation-delay

它是来设置动画的开始时间，单位是s或者ms，默认值为0：

6.animation-iteration-count

它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：

7.animation-direction

它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

8.animation-play-state

它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：

9.animation-fill-mode

属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-fill-mode: none|forwards|backwards|both|initial|inherit;

在这里插入图片描述

10.连写animation

animation：动画名动画时长动画速度曲线动画延迟动画次数动画播放方向

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      top: 0;
      left: 0;
      /* 动画名move 4s动画时间 速度曲线linear（匀速） 延迟为2s 无限次数 */
      animation: move 4s linear 2s infinite;

    }
    @keyframes move{
      from{
        top: 0;
        left: 0;

      }
      25%{
        top: 0;
        left: 300px;
      }

      50%{
        top: 300px;
        left: 300px;
      }

      75%{
        top: 300px;
        left: 0;
      }

      to{
        top: 0;
        left: 0;
      }

    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>