Un article pour apprendre rapidement le CSS grâce à l'animation !

Cet article vous donnera une analyse approfondie de la façon d'obtenir des effets d'animation et d'apprendre rapidement le CSS grâce à l'animation. J'espère qu'il sera utile à tout le monde !

Alors que les entreprises exigent de plus en plus le front-end, le CSS, l'une des trois armes magiques du front-end, devient de plus en plus complexe. Cela apporte une certaine pression aux étudiants débutants. CSS n'est pas très compliqué en ce qui concerne les attributs spécifiques. Le principal problème est qu'il existe de nombreux points de connaissance. Après avoir enfin appris les principaux points de connaissance, j'ai regardé les questions sur Internet ou lu les livres CSS écrits par les maîtres, et je me suis noyé dans un nouvel océan.

En fait, le cerveau humain n'est pas doué pour mémoriser des points de connaissance dispersés, mais s'il existe une ligne logique qui peut relier ces points de connaissance, cela peut grandement faciliter la mémoire et la recherche du cerveau. L’indice doit être logique et de préférence intéressant.

Il se trouve que l'animation CSS est un indice très intéressant. Vous pouvez comprendre les propriétés CSS dans les changements d'animation.

Par exemple, nous savons que CSS ajoute l'attribut border-radius du rectangle arrondi, alors quel est l'effet de définir des coins arrondis de différentes tailles ? Au lieu de changer la taille encore et encore pour expérimenter, réalisons une animation pour que ce soit clair en un coup d'oeil :

On peut aussi le faire bouger et se déformer :

On peut même le faire tourner en rond :

Alphabétisation rapide en animation CSS

Avant d'enchaîner d'autres attributs, comprenons d'abord l'animation.

Le mot-clé principal de l'animation est « mouvement ». Nous souhaitons répondre à quelques questions :

• Quoi : Qu'est-ce qui bouge ?
• Où : Où déménager ?
• Quand : Quand déménager ? Combien de temps faut-il pour déménager ?
• Comment : Comment déménager ?
• Combien : Combien de fois ?

Les résultats de ces questions constituent les composantes d'une animation.

Tout d’abord, quel est le sujet en mouvement ? Il s'agit de nos balises HTML, ou composants complexes composés de balises. Pour nous, l'essentiel c'est

et. Deuxièmement, où déménager ? C'est la propriété CSS qui est en cours de modification. C'est aussi le point de connaissance du CSS que nous voulons utiliser pour enchaîner. Troisièmement, quand déménager ? Il faut préciser la durée de l'animation, l'heure de début, etc. Il s'agit d'une propriété purement technique de l'animation. Quatrièmement, comment se déplacer ? Qu'il s'agisse de se déplacer à vitesse constante, d'accélérer, d'accélérer d'abord puis de décélérer, ou de créer une courbe de Bézier ou quelque chose comme ça, ce sont aussi les attributs techniques de l'animation. Cinquièmement, combien de fois bougez-vous ? Est-ce une fois, plusieurs fois ou continuez à bouger ? C'est aussi un attribut technique de l'animation pure.

Animation de transition

Apprenons d'abord une animation de propriété CSS simple appelée transition. Il est composé des 4 propriétés ci-dessus :

• transition-property : Spécifiez la valeur de la propriété CSS à modifier
• transition-duration : durée de l'animation
• transition-timing-function : la vitesse de l'animation
• transition-delay : Délai pour le démarrage de l'animation

Jetons un coup d'œil à un exemple :

        #hellocss {
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }

Cette désignation d'animation signifie que si la largeur change, attendez une seconde pour exécuter l'animation de changement de largeur de 5 secondes. Le taux de changement est uniforme.

Afin de voir clair, on fixe une largeur initiale, plus une couleur de fond et une couleur de premier plan :

    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            width: 20px;
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }
    </style>

Puisqu'il s'agit d'animation, il doit y avoir des changements. On écrit donc deux phrases de javascript :

    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>

puis on trouve un événement pour déclencher ce changement. Par exemple, on le fait au chargement de la page :

  
    
Hello,HTML
    
Hello,CSS
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>
  

Le code complet est le suivant :

  
    
    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            width: 20px;
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: linear;
            transition-delay: 1s;
        }
    </style>
  
  
    
Hello,HTML
    
Hello,CSS
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.width = "100px"; 
        }
    </script>
  

After. devenant compétent, nous pouvons aussi Les 4 attributs sont abrégés en un seul :

transition: width 5s linear 1s;

S'il n'y a pas de retard, le quatrième élément n'a pas besoin d'être écrit. Si vous adoptez la méthode de facilité consistant à ralentir d'abord puis à accélérer, l'élément 3 peut également être omis. Si le premier élément est sujet à changement, il peut être écrit comme tout. Mais la durée de la deuxième animation doit être écrite. Si elle n'est pas écrite, la valeur par défaut est de 0 seconde et il n'y aura rien.

Toutes les propriétés pouvant être calculées linéairement peuvent être utilisées pour l'animation. En plus des attributs de coordonnées faciles à comprendre tels que la largeur, la hauteur et la position, les attributs de couleur sont également souvent utilisés dans les bonnes scènes d'animation. Jetons un coup d'œil à un processus d'animation allant du texte jaune sur fond bleu au texte noir sur fond blanc :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
        #hellocss {
            background-color: blue;
            color: yellow;
            transition: all 10s linear 1s;
        }
    </style>
  </head>
  <body onload="trans1()">
    <div>Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
    <script>
        function trans1(){
            let hcss1 = document.getElementById("hellocss");
            hcss1.style.backgroundColor = "white";
            hcss1.style.color="red"; 
        }
    </script>
  </body>
</html>

animation d'images clés

La transition ci-dessus est relativement simple, par exemple, comment plusieurs fois pour boucler ou modifier Si nous devons le modifier dans le passé, ou le modifier plusieurs fois au milieu, nous devons spécifier plus d'attributs. Ces besoins sont satisfaits par l’animation d’images clés.

L'avantage de l'animation par images clés est que le point de départ et le point final sont spécifiés dans des images clés. Il n'est pas nécessaire d'écrire des événements pour le modifier. Tout est fait en CSS :

.

        @keyframes color_change{
            from {
                background-color: blue;
                color: yellow;
            }
            to {
                background-color: white;
                color: black;
            }
        }

然后我们在一个css选择器里面去引用定义好的keyframes动画，同时指定动画时长、变化曲线和延时：

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
        }

到了keyframes动画，我们终于可以指定播放多少次了，比如连播三次：

        #hellocss {
            animation-name: color_change;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: 3;
        }

甚至可以无限性地播放下去:

animation-iteration-count: infinite;

光循环播还不过瘾，我们还想先正着变，然后再变回来，我们可以将方向设为交替播放：

animation-direction: alternate;

把上面的综合在一起，大家跑起来看看：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @keyframes color_change {
        from {
          background-color: blue;
          color: yellow;
        }
        to {
          background-color: white;
          color: black;
        }
      }
      #hellocss {
        animation-name: color_change;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    </style>
  </head>
  <body>
    <div>Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
  </body>
</html>

而其实呢，from和to，分别是0%和100%的别名，也可以这么写：

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

这样我们可以增加百分比，让变化变得更有趣一些:

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: white;
          color: black;
        }
      }

最后，如果想让动画播放暂停怎么办? 我们可以通过修改animationPlayState属性为paused来实现，比如我们让点击第一个div来实现暂停功能：

  <body>
    <div onclick="trans1()">Hello,HTML</div>
    <div id="hellocss">Hello,CSS</div>
    <script>
      function trans1() {
        let hcss1 = document.getElementById("hellocss");
        hcss1.style.animationPlayState = "paused";
      }
    </script>
  </body>

通过动画形象理解css属性

变形 - 圆角矩形

我们现在终于可以看看开篇时的第一个动画是如何写成的了：

      @keyframes color_change {
        0% {
          background-color: blue;
          color: yellow;
          border-radius: 0px;
        }
        50% {
          background-color: yellowgreen;
          color: red;
        }
        100% {
          background-color: palegoldenrod;
          color: black;
          border-radius: 100px;
        }
      }

平面移动：transform:translate属性

最简单的平移方式就是使用transform:translate属性。比如我们开篇的第二个动画：

我们先让变色的圆角矩形向下移100px，然后再右移100px:

            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px)
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px)
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px)
            }
        }

旋转：transform:rotate属性

最后我们看旋转属性。

        @keyframes color_change{
            0% {
                background-color: blue;
                color: yellow;
                border-radius: 0px;
                transform:translate(0px,0px);
                transform:rotate(0deg);
            }
            50% {
                background-color: yellowgreen;
                color: red;
                transform:translate(0px,100px);
                transform:rotate(90deg);
            }
            100% {
                background-color: palegoldenrod;
                color: black;
                border-radius: 100px;
                transform:translate(100px,100px);
                transform:rotate(180deg);
            }
        }

通过动画学习盒子模型

让我们回归基础，通过动画来了解盒子模型。

所谓盒子，最基础的就是宽和高。 这没啥可说的，来个宽高动画先体验一下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
        @keyframes box_change {
            0% {
                height: 50px;
                width: 50px;
            }
            50% {
                height: 200px;
                width: 50px;
            }
            100% {
                height: 200px;
                width: 200px;
            }
        }
        .box1 {
            background-color: blue;
            color: yellow;
            opacity: 0.65;
            animation-name: box_change;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
  </head>
  <body>
      <div class="box1">Hello Box</div>
  </body>
</html>

除了宽高之外，盒子有边框，边框内部有padding，边框外面还有margin。

包括边框在内，都分为top, bottom, left, right四个方向：

        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;

我们现在给边框加上颜色和形状，带着margin和padding动起来看看效果：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      @keyframes box_change {
        0% {
          height: 50px;
          width: 50px;
          border-style: solid;
        }
        50% {
          height: 200px;
          width: 50px;
          border-style: dotted;
        }
        100% {
          height: 200px;
          width: 200px;
          border-style: dashed;
        }
      }
      .box1 {
        background-color: blue;
        color: yellow;
        border-width: 5px;
        border-top-color: #f5222d;
        border-bottom-color: #cf1322;
        border-left-color: #a8071a;
        border-right-color: #820014;
        padding: 10px;
        margin: 15px;
        animation-name: box_change;
        animation-duration: 10s;
        animation-delay: 1s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    </style>
  </head>
  <body>
    <div class="box1">Hello Box</div>
  </body>
</html>

打开chrome的开发者工具，我们可以更清楚地看清content, padding, border, margin, 之间的关系：

Border取5px只是为了让其更容易被识别，但是太丑了，我们将其改为2px。效果就好得多了：

（学习视频分享：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!