TIL #3 | CSS Animation ( feat. @keyframes, perspective)

10521 ワード
TIL css animation 先端学校 テキストリンク

CSS Animation


transition, tranform


以前はプロジェクトをしていたときに大文字のアニメのことはありませんでした.単純にカード画像でフーバーを使うと大きさが少し大きくなるので、こんなに詳しくアニメを知ったのは初めてです.
transition、transform、hoverのみを使用して、cssを動的に作成できます.
<style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: all 2s;
    }
    div:hover {
      background-color: blue;
      transform: scale(2.5);
    }
  </style>

@keyframes


ここで@keyframesを使えば、より自由なアニメーションが作れます.
<style>
      @keyframes travel {
        0% {
          transform: translate(0px, 0px);
        }
        16.6% {
          transform: translate(200px, 0px);
        }
        33.3% {
          transform: translate(200px, 200px);
        }
        49.9% {
          transform: translate(0px, 200px);
        }
        66.6% {
          transform: translate(200px, 200px);
        }
        83.3% {
          transform: translate(200px, 0px);
        }
        100% {
          transform: translate(0px, 0px);
        }
      }
      div {
        width: 100px;
        height: 100px;
        background: pink;
        animation: travel 3s;
      }
    </style>

perspective


これまでは2次元の移動でした.しかし,透視図を用いて3次元を移動しているように装飾することができる.
<style>
      .cont-card {
        perspective: 800px; 
      }

      .item-card {
        width: 100px;
        height: 100px; 
        transform: scale(0.5) rotateY(360deg);
        background: #f2994a;
        transition: all 1.2s;
      }

      .item-card:hover {
        transform: scale(2) rotateY(0deg);
        background-color: aqua;
      }
    </style>
<!-- html -->
  <body class="cont-card">
    <div class="item-card">hello world</div>
  </body>

以上のように、物体と私の距離感を透視図で表現することができます.

の最後の部分


今日はこのようにcssのいくつかのアニメーション要素を学びました.以前はあまり使われていませんでしたが、アニメーション要素をうまく利用すれば、Webページをより面白く見せることができるので、次の項目で適切に使うと良いでしょう.
dockerのswarmクラスタの構築
白駿/鬼ごっこ