TheBestXT.cc

Appearance

0%

CSS 动画 第二部分：动画播放前后状态 ​

目录 ​

航空旅行 ​

理论 ​

好吧，现在我们已经足够了解第二次旅程了：这一次是在工业时代。

原作者你在说什么胡话

这次，我们创建好了动画，你的任务是设置必要的动画属性，将气球发射到空中。

走你！

目标 ​

  • 将 move-birds 动画分配给鸟 .birds，持续时间 30s

  • 然后将 move-wheel 动画分配给磨坊风车 .mill，持续时间 10s，无限重复。

  • 然后将 move-aerostat 动画分配给气球 .aerostat，持续时间 20s，5s 延迟后播放。

实战 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Air journey</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch2.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="mechanical-world">
    <div>
      <div class="birds"></div>
      <div class="aerostat"></div>
      <div class="wind-mill"></div>
      <div class="ufo"></div>
    </div>
  </body>
</html>
css
@keyframes move-wheel {
  to {
    transform: rotate(360deg);
  }
}

@keyframes move-aerostat {
  to {
    transform: translate(350px, -1000px);
  }
}

@keyframes move-birds {
  to {
    transform: translateX(1000px);
  }
}

@keyframes move-ufo {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(200px, 375px);
  }
}

.birds {
  animation-name: move-birds;
  animation-duration: 30s;
}

.wind-mill {
  animation-name: move-wheel;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.aerostat {
  animation-name: move-aerostat;
  animation-duration: 20s;
  animation-delay: 5s;
}
.ufo {
  animation-name: move-ufo;
  animation-duration: 10s;
}

示例 ​

动画播放前后状态，其一 ​

理论 ​

在之前的例子中，在动画播放结束后，元素会回到初始状态。然而，有一个属性 animation-fill-mode 可以设置动画结束后，动画效果是否依然可见。当属性值为 forwards 时，元素会在动画结束后，保持结束时的状态。

我们可以通过下面的例子来观察这个属性是如何工作的。我们将两个相同的动画应用在两个相同的元素上，然后调整 animation-fill-mode 的值来看看会发生什么。

目标 ​

  • 将 reactioin 动画同时分配给两个烧瓶 .reagent，持续时间都是 3s，延迟 2s 播放。

  • 然后使化学物质 .experimental-reagent 在播放后保持状态。

实战 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pre- and post-animation state: animation-fill-mode, step 1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch3.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="scientific">
    <div class="sign"></div>
    <div class="tube">
      <span class="bubbles"></span>
      <span class="reagent"></span>
    </div>
    <div class="tube">
      <span class="bubbles"></span>
      <span class="reagent experimental-reagent"></span>
    </div>
  </body>
</html>
css
.bubbles {
  animation-name: blink;
  animation-duration: 2s;
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}

@keyframes reaction {
  0% {
    background-color: #01ff70;
  }

  100% {
    background-color: #ff4136;
  }
}

.reagent {
  animation-name: reaction;
  animation-duration: 3s;
  animation-delay: 2s;
}

.experimental-reagent {
  animation-fill-mode: forwards;
}

示例 ​

动画播放前后状态，其二 ​

理论 ​

要让动画结束后依然保持结束时的状态，需要设置 animations-fill-mode: forwards;。这个属性在设置了动画播放次数和动画方向时也会生效。我们尝试一下。

目标 ​

将下列属性设置给瓶中的化学药品 .experimental-reagent：

  • 动画后保持最终状态，

  • 播放次数 2

  • 动画方向 交替

实战 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pre- and post-animation state: animation-fill-mode, step 2</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch3.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="scientific">
    <div class="sign"></div>
    <div class="tube">
      <span class="bubbles"></span>
      <span class="reagent"></span>
    </div>
    <div class="tube">
      <span class="bubbles"></span>
      <span class="reagent experimental-reagent"></span>
    </div>
  </body>
</html>
css
@keyframes blink {
  50% {
    opacity: 1;
  }
}

@keyframes reaction {
  0% {
    background-color: #01ff70;
  }

  100% {
    background-color: #ff4136;
  }
}

.bubbles {
  animation-name: blink;
  animation-duration: 2s;
}

.reagent {
  animation-name: reaction;
  animation-duration: 3s;
  animation-delay: 2s;
}
.experimental-reagent {
  animation-fill-mode: forwards;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

动画播放前后状态，其三 ​

理论 ​

animation-fill-mode 的另一个属性值是 backwards。这个值规定了元素在动画播放之前的状态。

如果一个元素被分配了一个动画，并且具有延迟播放时间和 animation-fill-mode: backwards;，那么元素会从 from 或 0% 中描述的第一帧的状态开始。

我们来看下面的例子。

目标 ​

  • 为 .energy-fill 分配一个 power 动画，持续时间 2s，延迟 2s 播放。

  • 然后让电池 .mega-energy-fill 在动画开始之前展示它的电量。

实战 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pre- and post-animation state: animation-fill-mode, step 3</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch3.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="scientific">
    <div class="battery">
      <span class="energy-logo"></span>
      <span class="energy-fill"></span>
    </div>
    <div class="battery">
      <span class="energy-logo"></span>
      <span class="energy-fill mega-energy-fill"></span>
    </div>
  </body>
</html>
css
.energy-logo {
  animation-name: vibrate;
  animation-duration: 2s;
}

@keyframes vibrate {
  50% {
    transform: scale(1.2);
  }
}

@keyframes power {
  0% {
    width: 150px;
    background-color: #01ff70;
  }
  50% {
    background-color: #ffdc00;
  }
  100% {
    width: 30px;
    background-color: #ff4136;
  }
}

.energy-fill {
  animation-name: power;
  animation-duration: 2s;
  animation-delay: 2s;
}

.mega-energy-fill {
  animation-fill-mode: backwards;  
}

示例 ​

动画播放前后状态，其四 ​

跟其二里面描述的一样，animations-fill-mode: backwards; 这个属性在设置了动画播放次数和动画方向时也会生效。

就不试试了。

动画播放前后状态，其五 ​

要同时让动画在开始之前保持第一帧的状态，动画播放结束后保持最后一帧的状态，给 animation-fill-mode 设置为 both。

而且无论是动画重复播放还是交替方向都会生效。

css
.energy-logo {
  animation-name: vibrate;
  animation-duration: 2s;
}

.energy-fill {
  animation-name: power;
  animation-duration: 2s;
  animation-delay: 2s;
}

.mega-energy-fill {
  animation-fill-mode: both;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes vibrate {
  50% {
    transform: scale(1.2);
  }
}

@keyframes power {
  0% {
    width: 150px;
    background-color: #01ff70;
  }
  50% {
    background-color: #ffdc00;
  }
  100% {
    width: 30px;
    background-color: #ff4136;
  }
}

启动工厂，第一步 ​

背景小故事 ​

该把我们学到的知识用起来了，现在我们要开始生产机器人。

在这节和下一节中，动画帧都是创建好的，我们只需要设置正确的动画属性。

我们首先制作卫星天线和运输机的动画。

目标 ​

  • 为飞机 .plane 分配一个 move-plane 动画，持续时间 10s，

  • 然后为天线 .antenna 设置动画 move-antenna，持续时间 2s，延迟 2s，播放后保持状态。

实战 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Launching a factory, step 1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch3.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="scientific-world">
    <div>
      <div class="plane"></div>
      <div class="antenna"></div>
    </div>
  </body>
</html>
css
@keyframes move-plane {
  to {
    transform: translateX(-1000px);
  }
}

@keyframes move-antenna {
  to {
    transform: rotate(-60deg);
  }
}

.plane {
  animation-name: move-plane;
  animation-duration: 10s;
}

.antenna {
  animation-name: move-antenna;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

启动工厂，第二步 ​

背景故事 ​

太棒了！接下来我们要做的是用车把零件送到工厂并开始生产。

目标 ​

  • 给小车 .car 分配一个 move-car 动画，持续 4s，延迟 5s 播放，保持播放后状态。

  • 为烟雾 .fog-1 和 .fog-2 分配 show-fog 动画，持续 1s，播放 2 次，交替方向。

  • .fog-1 延迟 9s 播放，.fog-2 延迟 10s。

实战 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Launching a factory, step 2</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="epoch3.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="scientific-world">
    <div>
      <div class="plane"></div>
      <div class="antenna"></div>
      <div class="car"></div>
      <div class="fog-1"></div>
      <div class="fog-2"></div>
    </div>
  </body>
</html>
css
@keyframes move-plane {
  to {
    transform: translateX(-1000px);
  }
}

@keyframes move-antenna {
  to {
    transform: rotate(-60deg);
  }
}

@keyframes move-car {
  to {
    transform: translateX(-350px);
  }
}

@keyframes show-fog {
  to {
    opacity: 1;
  }
}

.plane {
  animation-name: move-plane;
  animation-duration: 10s;
}

.antenna {
  animation-name: move-antenna;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
.car {
  animation-name: move-car;
  animation-duration: 4s;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}
.fog-1, .fog-2 {
  animation-name: show-fog;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
.fog-1 {
  animation-delay: 9s;  
}
.fog-2 {
  animation-delay: 10s;  
}

示例 ​

评论区
评论区空空如也
发送评论
名字
0 / 20
邮箱
0 / 100
评论内容
0 / 140
由于是非实名评论，所以不提供删除功能。如果你需要删除你发送的评论，或者是其他人的评论对你造成了困扰，请 发邮件给我 。同时评论区会使用 AI + 人工的方式进行审核，以达到合规要求。

© thebestxt.cc
辽ICP备16009524号-8
本站所有文章版权所有，转载请注明出处

Copyright © 2019-present xt