CSSをアニメーションでサクッと学べる記事！-CSSチュートリアル-php.cn

この記事では、アニメーション効果を実現し、アニメーションを通じて CSS を素早く学ぶ方法について詳しく分析します。皆さんのお役に立てれば幸いです。

CSSをアニメーションでサクッと学べる記事！

ビジネスでフロントエンドに対する要求がますます高まるにつれ、フロントエンドの 3 つの魔法の武器の 1 つである CSS はますます複雑になっています。初心者の生徒にはある程度のプレッシャーがかかります。 CSS は、特定の属性に至るまでそれほど複雑ではありませんが、主な問題は、多くの知識ポイントがあることです。ようやく主要な知識ポイントを学んだ後、インターネットで質問を見たり、達人が書いた CSS の本を読んだりして、私は新たな海に溺れました。

実際、人間の脳は散在する知識点を記憶するのが苦手ですが、これらの知識点を論理的に結びつけることができる線があれば、脳の記憶と検索が大幅に容易になります。手がかりは論理的で、できれば興味深いものである必要があります。

たまたまですが、CSS アニメーションは非常に興味深い手がかりであり、アニメーションの変化から CSS のプロパティを理解することができます。

たとえば、CSS が角丸四角形の border-radius 属性を追加することはわかっていますが、さまざまなサイズの角丸を設定するとどのような影響があるでしょうか?サイズを何度も変更して実験する代わりに、アニメーションを作成して一目でわかるようにすることもできます:

CSSをアニメーションでサクッと学べる記事！

#また、移動させたり変形させたりすることもできます:

CSSをアニメーションでサクッと学べる記事！

回転させることもできます:

CSSをアニメーションでサクッと学べる記事！

CSS アニメーションのクイックリテラシー

他の属性を組み合わせる前に、私たちはまずアニメーションを理解します。

アニメーションの核となるキーワードは「動き」です。いくつかの質問に答えなければなりません:

どこ: どこに移動しますか?
いつ: いつ移動するか?移動にはどのくらい時間がかかりますか?
方法: どうやって移動しますか?
どのくらい: 何回?

これらの質問の結果がアニメーションの要素を構成します。

まず、動く被写体とは何でしょうか？それは HTML タグ、またはタグで構成される複雑なコンポーネントです。私たちにとって、それは主に

とです。第二に、どこに移動するか？これは変更される CSS プロパティです。これは、文字列を結合するために使用する CSS の知識ポイントでもあります。第三に、いつ移動するか？アニメーションの長さ、開始時間などを指定する必要があります。これは純粋にアニメーションの技術的な特性です。第四に、どうやって移動するか？一定の速度で移動するか、加速するか、最初に加速してから減速するか、またはベジェ曲線などを作成するかどうか、これらはアニメーションの技術的属性でもあります。五番目、何回引っ越しますか？それは 1 回ですか、複数回ですか、それとも継続的に行われますか?これは純粋なアニメーションの技術的特性でもあります。

トランジションアニメーション

最初に、トランジションと呼ばれる単純な CSS プロパティアニメーションを学習します。上記4つのプロパティで構成されます。

transition-duration: アニメーション時間
transition - timing-function: アニメーションの速度変化
transition-delivery: アニメーション開始の遅延時間

例を見てみましょう:

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

ログイン後にコピー

このアニメーションは、幅が変化した場合、1秒遅れて幅変化のアニメーションを5秒間実行することを意味します。変化率は均一です。

はっきりと見るために、初期の幅に加えて背景色と前景色を設定します。

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

ログイン後にコピー

これはアニメーションであるため、変更が必要です。そこで、JavaScript の 2 つの文を書きます:

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

ログイン後にコピー

そして、この変更をトリガーするイベントを見つけます。たとえば、ページがロードされたときに実行します:

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

ログイン後にコピー

CSSをアニメーションでサクッと学べる記事！ ##Complete コードは次のとおりです:



  
    
    <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>

ログイン後にコピー

熟練したら、4 つの属性を 1 つに短縮することもできます:

transition: width 5s linear 1s;

ログイン後にコピー

遅延がない場合、4 番目の項目は必要ありません。書かれること。最初にゆっくり、次に速くという簡単な方法が採用される場合、項目 3 も省略できます。最初の項目が変更される可能性がある場合は、すべてと記述することができます。ただし、2 番目のアニメーション期間は必ず記述する必要があり、記述しない場合はデフォルトで 0 秒となり、何も表示されません。

線形に計算できるプロパティはすべてアニメーションに使用できます。幅、高さ、位置などのわかりやすい座標属性に加え、アニメーションの良いシーンでは色属性もよく使われます。青の背景に黄色のテキストから白の背景に黒のテキストまでのアニメーションプロセスを見てみましょう:

CSSをアニメーションでサクッと学べる記事！ #

<!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>

ログイン後にコピー

keyframes アニメーション上記の遷移は比較的単純です。たとえば、何回ループする必要があるか、何回元に戻す必要があるか、または何回繰り返す必要があるかなどです。途中で変更する必要がある場合など、さらに多くの属性を指定する必要があります。これらのニーズはキーフレームアニメーションによって満たされます。

キーフレームアニメーションの利点は、開始点と終了点がキーフレームで指定されることです。それを変更するイベントを記述する必要はありません。すべて 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;
        }
      }

ログイン後にコピー

CSSをアニメーションでサクッと学べる記事！

最后，如果想让动画播放暂停怎么办? 我们可以通过修改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属性

变形 - 圆角矩形

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属性。比如我们开篇的第二个动画：

CSSをアニメーションでサクッと学べる記事！

我们先让变色的圆角矩形向下移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属性

最后我们看旋转属性。

CSSをアニメーションでサクッと学べる記事！

        @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>

ログイン後にコピー

CSSをアニメーションでサクッと学べる記事！

除了宽高之外，盒子有边框，边框内部有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动起来看看效果：

1CSSをアニメーションでサクッと学べる記事！

代码如下：

<!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, 之间的关系：

1CSSをアニメーションでサクッと学べる記事！