Maison > Article > interface Web > Un article expliquant les techniques courantes pour créer des animations avec CSS (Collection)

Un article expliquant les techniques courantes pour créer des animations avec CSS (Collection)

奋力向前avant: 2021-09-16 09:29:142585parcourir

Dans l'article précédent "Compétences JS avancées que vous méritez de connaître (Résumé)", nous avons découvert les compétences JS avancées. L'article suivant vous présentera les techniques courantes pour créer des animations avec CSS. Voyons comment les réaliser ensemble.

transition

Il existe une propriété transition en CSS, qui peut surveiller les changements dans une certaine propriété CSS et obtenir des effets d'animation simples grâce au contrôle des modifications de propriété : 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 propriété Est une propriété abrégée pour la propriété de transition, la durée de transition, la fonction de synchronisation de transition et le délai de transition. ——Cité du code HTML MDN

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

Effet d'animation cliquez ici pour voir l'adresse https://codepen.io/wjq990112/pen/PoqEemX

Après l'avoir expérimenté, parlons maintenant de l'utilisation en détail :🎜🎜code 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;
}

🎜Vous ne pourrez peut-être pas le comprendre s'il est écrit comme ceci. Décomposons-le un par un :🎜🎜code css
🎜rrreee🎜Le . L'attribut transition est composé des 4 éléments ci-dessus. Une combinaison de propriétés CSS. 🎜🎜Les premier et deuxième attributs sont obligatoires, utilisés pour spécifier les attributs d'écoute qui doivent ajouter une animation de transition et spécifier la durée de l'animation. 🎜🎜Les troisième et quatrième attributs sont facultatifs et sont utilisés pour définir l'effet et le délai de l'animation de transition. 🎜🎜🎜Les valeurs facultativesde transition-timing-function sont détaillées dans 🎜🎜https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function🎜🎜🎜Le le premier attribut contient également 2 valeurs spéciales : none : n'écoute aucune propriété all : écoute toutes les propriétés et leur ajoute une animation de transition. 🎜🎜Lorsque le troisième attribut est omis, le deuxième élément de temps sera automatiquement analysé comme le délai de l'effet d'animation. 🎜🎜C'est encore un peu difficile à comprendre, donnons un exemple : 🎜🎜code css🎜🎜🎜transition : arrière-plan 1s facilité d'entrée-sortie 0,2s
🎜🎜🎜L'exemple ci-dessus est le même que dans la partie de code précédente. 🎜🎜Cela signifie écouter les changements dans l'arrière-plan et y ajouter une animation de transition d'une seconde. L'effet de l'animation de transition est qu'elle commence lentement et se termine lentement, et commence à s'exécuter après les changements d'attribut. pendant 0,2 seconde. 🎜🎜Ensuite, cette section du code ci-dessus : 🎜🎜code css🎜rrreee🎜Les attributs transition dans le code ajoutent des animations de transition à background``color``width , lorsque ces trois attributs de la balise class=box changent, l'effet d'animation par défaut ou spécifié y sera automatiquement ajouté. 🎜🎜Ensuite, nous l'utiliserons pour une utilisation avancée : 🎜🎜Dans le processus d'implémentation de l'animation, vous devrez peut-être utiliser une méthode courante : la méthode aveugle overflow. 🎜🎜Utilisé pour obtenir des effets similaires au changement de Tab : 🎜🎜code HTML🎜rrreee🎜🎜effet d'animation Cliquez ici pour voir https://codepen.io/wjq990112/pen/MWwrXWo🎜🎜🎜. implémentation Pour cet effet, il vous suffit de définir le conteneur sur overflow: Hidden;, puis d'écouter l'attribut transform de l'onglet dans le conteneur et utilisez transform : translateX() pour le déplacer dans la direction de l'axe X, et vous avez terminé. 🎜🎜Certains effets de rotation peuvent également être réalisés en utilisant transform: rotateZ(); pour faire pivoter sur le plan du navigateur. La valeur par défaut est de faire pivoter le centre géométrique comme point central. 🎜🎜animation et images clés🎜🎜L'utilisation de l'attribut animation est similaire à transition. Permettez-moi de le présenter en détail ensuite. 🎜🎜🎜La propriété CSS d'animation est un raccourci pour le nom d'animation, la durée d'animation, la fonction de synchronisation d'animation, le délai d'animation, le nombre d'itérations d'animation, la direction d'animation, le mode de remplissage d'animation et le mode de lecture d'animation. formulaire d'attribut de propriétés d'état. 🎜🎜🎜 Créez d'abord un simple effet de rotation pour expérimenter : 🎜🎜 code HTML l'animation de rotation utilise deux propriétés CSS, animation et keyframes, qui sont couramment utilisées pour créer des animations. 🎜🎜🎜animation🎜🎜🎜Parlons maintenant de l'utilisation de base : 🎜🎜code css🎜rrreee🎜Vous ne le comprenez certainement toujours pas, alors je vais continuer à le démonter un par un et à vous l'expliquer : 🎜🎜 code css🎜rrreee🎜Je crois que la plupart des attributs Ils sont tous faciles à comprendre, mais il n'y a que deux attributs qui peuvent être plus difficiles à comprendre. 🎜🎜animation-direction et animation-fill-mode peuvent être considérées comme les deux propriétés les plus difficiles à comprendre : 🎜🎜css code🎜rrreee. 🎜Ces deux attributs peuvent être considérés comme les plus difficiles à comprendre. Si vous souhaitez voir l'effet après le réglage, vous pouvez passer à MDN. 🎜🎜🎜keyframes🎜🎜🎜Cet attribut CSS, je pense que les étudiants qui ont appris une production d'animation simple doivent le comprendre, c'est très simple, ce sont des images clés. 🎜🎜Définissez des images clés pour une animation et CSS remplira automatiquement son chemin de mouvement. 🎜🎜code CSS🎜

@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视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html count 循环 class Property JS function overflow background transform transition animation https

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Apprenez étape par étape à utiliser CSS pour créer un effet d'ondulation d'eau réaliste (avec code)Article suivant：Apprenez étape par étape à utiliser CSS pour créer un effet d'ondulation d'eau réaliste (avec code)

Articles Liés

Voir plus