动画循环

可用

8.1 属性 animation-iteration-count

CSS 动画可以创建动态的视觉效果,从而改善用户界面。接下来我们来看看控制动画循环的两个关键属性:animation-iteration-countanimation-direction

属性 animation-iteration-count 定义了动画要播放多少次。这个属性可以控制动画是播放一次、多次还是无限次。

语法:

element {
  animation-iteration-count: number | infinite;
}

其中:

  • number: 动画播放的次数(比如 1, 2, 3 等)
  • infinite: 动画将无限次播放

例子:

HTML
<div class="box"></div>
CSS
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

代码说明:

  • @keyframes bounce: 定义一个动画,它使元素上升然后返回到原始位置
  • animation-iteration-count: infinite: 设置动画无限次播放

8.2 属性 animation-direction

属性 animation-direction 确定动画的播放方向。它允许指定动画是在正方向播放、反方向播放还是来回切换。

语法:

element {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

其中:

  • normal: 动画按正方向播放(默认)
  • reverse: 动画按反方向播放
  • alternate: 动画在正方向和反方向之间交替
  • alternate-reverse: 动画从反方向开始,然后在反方向和正方向之间交替

示例

正反方向播放:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.box1 {
  animation-direction: normal;
}

.box2 {
  animation-direction: reverse;
}

代码说明:

  • .box1: 动画按正方向播放
  • .box2: 动画按反方向播放

交替方向:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.box1 {
  animation-direction: alternate;
}

.box2 {
  animation-direction: alternate-reverse;
}

代码说明:

  • .box1: 动画在正方向和反方向之间交替
  • .box2: 动画从反方向开始,然后在反方向和正方向之间交替

8.3 使用两个属性的示例

摇摆的元素

  • 这个例子展示了一个摇摆的元素,它左右移动:
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摇摆的元素</title>
    <style>
      @keyframes swing {
        0% {
          transform: rotate(0deg);
        }

        50% {
          transform: rotate(10deg);
        }

        100% {
          transform: rotate(0deg);
        }
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        animation: swing 1s infinite alternate-reverse;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

代码说明:

  • @keyframes swing: 定义一个动画,使元素旋转
  • .box: 应用动画 swing 的元素,持续时间 1 秒,无限次播放,并从反方向开始
1
任务
Frontend SELF ZH,  第 24 级课程 2
已锁定
交替方向
交替方向
1
任务
Frontend SELF ZH,  第 24 级课程 2
已锁定
完整组合
完整组合
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论