suchen

Heim  >  Artikel  >  Web-Frontend  >  Ein Artikel, der gängige Techniken zum Erstellen von Animationen mit CSS erklärt (Sammlung)

Ein Artikel, der gängige Techniken zum Erstellen von Animationen mit CSS erklärt (Sammlung)

奋力向前
奋力向前nach vorne
2021-09-16 09:29:142661Durchsuche

Im vorherigen Artikel „Erweiterte JS-Fähigkeiten, die Sie kennen sollten (Zusammenfassung)“ haben wir etwas über fortgeschrittene JS-Fähigkeiten gelernt. Der folgende Artikel stellt Ihnen die gängigen Techniken zum Erstellen von Animationen mit CSS vor. Sehen wir uns gemeinsam an, wie das geht.

Ein Artikel, der gängige Techniken zum Erstellen von Animationen mit CSS erklärt (Sammlung)

transition

Es gibt eine transition-Eigenschaft in CSS, mit der Änderungen in einer bestimmten CSS-Eigenschaft überwacht und durch die Steuerung von Eigenschaftsänderungen einfache Animationseffekte erzielt werden können: transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果：

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: #000;
        border-radius: 4px;
        /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
        transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
      }
      .box:hover {
        width: 400px;
        color: #000;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div>
      <div>鼠标悬浮查看效果</div>
    </div>
  </body>
</html>

动画效果点击此处查看 地址https://codepen.io/wjq990112/pen/PoqEemX

体验完了，现在来具体讲一下用法：

css代码

transition: transition-property | transition-duration |
  transition-timing-function | transition-delay;

这样写你们估计看不懂，我们一条一条来拆解：

css代码

transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */
transition-duration: 1s; /* 设定过渡动画的时长 */
transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */
transition-delay: 0.2s; /* 设定触发动画的延迟 */

而transition属性就是由上面的 4 条 CSS 属性组合而成。

第一第二个属性是必须项，用于指定侦听需要添加过渡动画的属性以及指定动画时长。

第三第四个属性为可选项，用于设定过渡动画的效果和延迟。

transition-timing-function的可选值详见

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

第一个属性还有 2 个特殊值：none：不对任何属性进行侦听 all：对所有属性进行侦听并为其添加过渡动画。

当省略第三个属性时，第二个时间项会被自动解析为动画效果延迟。

干说还是有点难理解，举个栗子吧：

css代码

transition: background 1s ease-in-out 0.2s; 

上面这个例子，就是前面的代码中的一部分。

意思是侦听background的变化，为其添加 1 秒的过渡动画，过渡动画的效果是慢开始慢结束，并在属性变化 0.2 秒后才开始执行。

那么上面代码中的这一段：

css代码

.box {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #000;
  border-radius: 4px;
  /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
  transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
  width: 400px;
  color: #000;
  background: #fff;
}

代码中的transition属性分别为background``color``width加上了过渡动画，当class=box的标签的这三个属性发生变化时，就回自动为其加上默认或指定的动画效果。

接下来我们就用它来做一些进阶的用法：

在实现动画的过程中，可能会需要使用一种常用的方式：overflow障眼法。

用于实现一些类似Tab切换的效果：

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        width: 100px;
        height: 100px;
        overflow: hidden;
      }
      #tabs {
        display: flex;
        width: 200px;
        height: 100px;
        transition: transform 0.3s;
      }
      .tab-pane-1 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
      }
      .tab-pane-2 {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: yellow;
      }
      .transform {
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <div>
      <div id="tabs">
        <div>1</div>
        <div>2</div>
      </div>
    </div>
    <button onclick="switchTabPane()">切换Tab</button>

    <script>
      function switchTabPane() {
        var el = document.getElementById(&#39;tabs&#39;)
        el.className = el.className ? &#39;&#39; : &#39;transform&#39;
      }
    </script>
  </body>
</html>

动画效果点击此处查看https://codepen.io/wjq990112/pen/MWwrXWo

实现这个效果只需要将容器设置为overflow: hidden;，然后对容器内的tab侦听transform属性，使用transform: translateX()使其在 X轴方向移动，大功告成了。

还有一些旋转效果也可以使用transform: rotateZ();使其在浏览器平面上旋转实现，默认是以几何中心为中心点进行旋转。

animation & keyframes

animation属性的用法和transition比较相似，接下来由我来详细介绍一下。

animation CSS 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

先做个简单的旋转效果体验一下：

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes rotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(359deg);
        }
      }
      .rotate {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background: red;
        /* 为元素设定 10s 的旋转动画 */
        animation: rotate 10s linear infinite;
      }
      .wrapper {
        display: flex;
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <div>旋转</div>
    </div>
  </body>
</html>

动画效果点击此处查看https://codepen.io/wjq990112/pen/mdJXeqm

这是一个基础的旋转动画，用到了animation和keyframes两个常用于制作动画的 CSS 属性。

animation

现在我们来讲一下基础用法：

css代码

animation: animation-name | animation-duration | animation-timing-function |
  animation-delay | animation-iteration-count | animation-direction |
  animation-fill-mode | animation-play-state;

这样讲肯定还是不懂，继续一条一条拆解开给大家讲解：

css代码

animation-name: rotate; /* 自定义 keyframes 名 */
animation-duration: 10s; /* 设定单次过渡动画时长 */
animation-timing-function: linear; /* 设定单次过渡动画效果 */
animation-delay: 0s; /* 设定单次过渡动画延迟时间 */
animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */
animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */
animation-fill-mode: none; /* 设定过渡动画的填充模式 */
animation-play-state: running; /* 设定过渡动画运行或停止 */

相信大部分属性都很好理解，只有两个属性可能会比较难理解。

animation-direction和animation-fill-mode应该可以说是最难理解的两个属性了，我们再详细讲解一下：

css代码

/*
 *	normal: 按照 keyframes 设定的动画方向运行
 *	reverse: 按照 keyframes 设定的动画方向的反方向运行
 *	alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行
 *	alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行
 */
animation-direction: normal | reverse | alternate | alternate-reverse;
/*
 *	none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态
 *	forwards: 动画结束后停留在动画的最后一帧
 *	backwards: 动画开始前停留在动画的第一帧
 *	both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧
 */
animation-fill-mode: none | forwards | backwards | both;

这两个属性可以说是最难理解的，如果想看设定之后的效果，可以转战MDN

transition CSS Eigenschaft ist eine Abkürzungseigenschaft für Übergangseigenschaft, Übergangsdauer, Übergangs-Timing-Funktion und Übergangsverzögerung. ——Zitiert aus MDN

HTML-Code

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

Animationseffekt Klicken Sie hier, um die Adresse anzuzeigen https://codepen.io/wjq990112/pen/PoqEemX

Nachdem wir es erlebt haben, reden wir jetzt darüber die Verwendung im Detail:🎜🎜CSS-Code🎜
/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}
🎜Sie können es möglicherweise nicht verstehen, wenn es so geschrieben ist. Lassen Sie es uns einzeln aufschlüsseln:🎜🎜CSS-Code
🎜rrreee🎜Der Das Attribut „transition“ besteht aus den oben genannten 4 Elementen. Eine Kombination von CSS-Eigenschaften. 🎜🎜Das erste und das zweite Attribut sind erforderlich. Sie werden verwendet, um die Abhörattribute anzugeben, die zum Hinzufügen einer Übergangsanimation erforderlich sind, und um die Animationsdauer anzugeben. 🎜🎜Die dritte und vierte Eigenschaft sind optional und werden verwendet, um den Effekt und die Verzögerung der Übergangsanimation festzulegen. 🎜🎜🎜Die optionalen Werte der Transition-Timing-Funktion sind detailliert unter 🎜🎜https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function🎜🎜🎜The Das erste Attribut besteht ebenfalls aus zwei Sonderwerten: none: keine Eigenschaften abhören all: alle Eigenschaften abhören und ihnen Übergangsanimationen hinzufügen. 🎜🎜Wenn das dritte Attribut weggelassen wird, wird das zweite Mal automatisch als Verzögerung des Animationseffekts analysiert. 🎜🎜Es ist immer noch etwas schwierig zu verstehen, geben wir Ihnen ein Beispiel: 🎜🎜CSS-Code🎜🎜🎜Übergang: Hintergrund 1s Easy-In-Out 0,2s;
🎜🎜🎜Das obige Beispiel ist das gleiche wie in der vorherige Codeteil. 🎜🎜Es bedeutet, auf Änderungen im Hintergrund zu achten und ihm eine 1-sekündige Übergangsanimation hinzuzufügen. Der Effekt der Übergangsanimation besteht darin, langsam zu beginnen und langsam zu enden, und sie wird erst dann ausgeführt Attributänderungen für 0,2 Sekunden. 🎜🎜Dann dieser Abschnitt des Codes oben: 🎜🎜CSS-Code🎜rrreee🎜Die transition-Attribute im Code fügen Übergangsanimationen zur background``color``width hinzu, wenn Wenn sich diese drei Attribute des Tags class=box ändern, wird automatisch der Standard- oder angegebene Animationseffekt hinzugefügt. 🎜🎜Als nächstes verwenden wir es für einige fortgeschrittene Anwendungen: 🎜🎜Bei der Implementierung von Animationen müssen Sie möglicherweise eine gängige Methode verwenden: die Blindmethode overflow. 🎜🎜Wird verwendet, um einige Effekte zu erzielen, die dem Tab-Wechsel ähneln: 🎜🎜HTML-Code🎜rrreee🎜🎜Animationseffekt. Klicken Sie hier, um https://codepen.io/wjq990112/pen/MWwrXWo anzuzeigen Implementierung Für diesen Effekt müssen Sie nur den Container auf overflow: versteckt; setzen und dann auf das transform-Attribut des tab in hören den Container und verwenden Sie transform : translatorX(), um ihn in Richtung der X-Achse zu verschieben, und schon sind Sie fertig. 🎜🎜Es gibt auch einige Rotationseffekte, die durch die Verwendung von transform: rotationZ(); zum Drehen auf der Browserebene realisiert werden können. Standardmäßig wird mit dem geometrischen Mittelpunkt als Mittelpunkt gedreht. 🎜🎜Animation & Keyframes🎜🎜Die Verwendung des Attributs animation ähnelt der von transition. Lassen Sie mich es als Nächstes im Detail vorstellen. 🎜🎜🎜Die Animations-CSS-Eigenschaft ist eine Abkürzung für den Animationsnamen, die Animationsdauer, die Animations-Timing-Funktion, die Animationsverzögerung, die Anzahl der Animationsiterationen, die Animationsrichtung, den Animationsfüllmodus und die Animationswiedergabe. Attributformular für Zustandseigenschaften. 🎜🎜🎜Erstellen Sie zunächst einen einfachen Rotationseffekt, um Folgendes zu erleben: 🎜🎜HTML-Code
🎜rrreee🎜🎜Animationseffekt Klicken Sie hier, um https://codepen.io/wjq990112/pen/mdJXeqm anzuzeigen.🎜🎜🎜Dies ist ein Basic Rotationsanimation verwendet zwei CSS-Eigenschaften, animation und keyframes, die häufig zum Erstellen von Animationen verwendet werden. 🎜🎜🎜Animation🎜🎜🎜Lassen Sie uns nun über die grundlegende Verwendung sprechen: 🎜🎜CSS-Code🎜rrreee🎜Sie verstehen es definitiv immer noch nicht, also werde ich es weiterhin einzeln zerlegen und Ihnen erklären: 🎜🎜 CSS-Code🎜rrreee🎜Ich glaube, die meisten Attribute sind alle leicht zu verstehen, aber es gibt nur zwei Attribute, die möglicherweise schwieriger zu verstehen sind. 🎜🎜animation-direction und animation-fill-mode sind die beiden am schwierigsten zu verstehenden Eigenschaften: 🎜🎜CSS-Code🎜rrreee 🎜Man kann sagen, dass diese beiden Attribute am schwierigsten zu verstehen sind. Wenn Sie den Effekt nach der Einstellung sehen möchten, können Sie zu MDN wechseln. 🎜🎜🎜keyframes🎜🎜🎜Ich glaube, dass Schüler, die einige einfache Animationsproduktionen gelernt haben, dieses CSS-Attribut verstehen müssen, es ist sehr einfach, es handelt sich um Keyframes. 🎜🎜Legen Sie Keyframes für eine Animation fest und CSS füllt den Bewegungspfad automatisch aus. 🎜🎜CSS-Code🎜
@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。

不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。

通常情况下，keyframes会与animation配合使用。

讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：

请你使用 CSS 实现一个方块来回移动，无限循环。

这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：

/*
 *	①
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 1s linear infinite;
}
/*
 *  ②
 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.move {
  width: 100px;
  height: 50px;
  background: yellow;
  animation: move 0.5s linear infinite alternate;
}

推荐学习：CSS视频教程

Das obige ist der detaillierte Inhalt vonEin Artikel, der gängige Techniken zum Erstellen von Animationen mit CSS erklärt (Sammlung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html count 循环 class Property JS function overflow background transform transition animation https
Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.im. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS einen realistischen Wasserwelleneffekt erzeugen (mit Code)Nächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS einen realistischen Wasserwelleneffekt erzeugen (mit Code)

In Verbindung stehende Artikel

Mehr sehen