[CSS] アニメーション (animation)

Study / Javascript, Jquery, Css    作成日付 : 2019/12/20 20:51:38   修正日付 : 2019/12/23 07:44:49

こんにちは。明月です。


アニメーションスタイルは前述で紹介したトランジションと似ているな効果になります。

link - [CSS] トランジション(transition)


様々な要素を動的に動く効果と関係があることですね。差異というとトランジション(transition)の場合は指定したCSSスタイルによる効果を制御するが、アニメーションの場合は様々なアクションをもっと複雑な効果ができることだといいます。

複雑な効果というとトランジション(transition)の場合はスタイルで色の変換、要素移動する時に遅くしたり、早くしたりする制御ですが、アニメーションは要素を回しながら色をキラキラすることができると意味です。


私の場合は「loading」イメージやコンテンツの効果よりアイコン要素で動的要素を作る時によく使います。

<!DOCTYPE html>	
<html>	
 <head>	
  <style>
    /* アニメーションプロパティ*/
    @keyframes test-animation{	
      0% {	
        min-width:0%;	
        background-color:red;	
      }	
      50%	{	
        min-width:50%;	
        background-color:blue;	
        color:white;	
      }	
      100% {	
        min-width:100%;	
        background-color:green;	
        color:white;	
      }	
    }	
    div.box {	
      display:inline-block;	
      /* アニメーションプロパティ設定*/
      animation-name : test-animation;	
      /* アニメーションが開始から終了までかかる時間 */
      animation-duration :3s;
      /* アニメーション開始タイミング */
      animation-delay:1s;
      /* アニメーション変換タイプ */
      animation-timing-function:linear;	
      /* アニメーションが完了した時の形 */
      animation-fill-mode:both;	
      /* アニメーションの繰り返し回数 */
      animation-iteration-count: infinite;	
      /* アニメーションの流れタイプ */
      animation-direction:reverse;	
    }	
    div.box:hover{
      /* アニメーション状況設定 */
      animation-play-state:paused;	
    }	
  </style>	
 </head>	
 <body>	
  <div class="box">	
    マウスをバーの上に置いてみてくたさい。
  </div>	
 </body>	
</html>
マウスをバーの上に置いてみてくたさい。

アニメーションスタイルをみれば、ほぼトランジションと似てますね。

「animation-name」はアニメーションスタイルのプロパティを設定することができます。アニメーションプロパティは「@keyframes プロパティ名」形式で作成できます。

プロパティをみれば「0%」、「50%」、「100%」の表現があります。「0%」アニメーションの初期の状況、「100%」は完了した時の状況、50％は「duration」を3sに設定しましたが、アニメーションが開始してから1.5秒後の状況になります。

そして「delay」はアニメーションがローディングされて何秒後から開始するかの設定する項目です。

「animaion-timing-function」はトランジションと同じオプションで「linear」は一定な速度、ease-inは遅くなる速度、ease-outは早くなる速度、ease-in-out遅くなってまた早くなる速度、cubic-bezier(n,n,n,n)速度指定があります。

そして「fill-mode」はアニメーションが終わった時に状況ですが、「animation-iteration-count」で「infinite」で設定しましたので、アニメーションが終わらない設定になっていますね。

もし、「both」ということで設定すると「100%」の状況で残っています。その以外に「initial」に設定すると「0%」に戻りますね。

「animation-direction」はなれるのタイプですが、「reverse」を設定すると「0→100%」ではなく、「100%→0%」に動きます。


最後「hover」オプションで「animation-play-state」でアニメーションを止まる効果も付けました。

<!DOCTYPE html>	
  <html>
    <head></head>
    <body>
    <style>
      @keyframes uil-battery-demo-anim4 {
        0% {
          opacity: 0;
        }
        10% {
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
      }
      @keyframes uil-battery-demo-anim3 {
        0% {
          opacity: 0;
        }
        30% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
      }
      @keyframes uil-battery-demo-anim2 {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0;
        }
        70% {
          opacity: 1;
        }
      }
      @keyframes uil-battery-demo-anim1 {
        0% {
          opacity: 0;
        }
        70% {
          opacity: 0;
        }
        90% {
          opacity: 1;
        }
      }
      .uil-battery-demo-css .outer {
        position: relative;
        width: 80px;
        border: 13px solid #0d8c30;
        height: 120px;
        top: 50px;
        left: 20px;
        border-radius: 10px;
      }
      .uil-battery-demo-css .outer:after {
        content: " ";
        display: block;
        position: absolute;
        top: -33px;
        left: 0px;
        width: 52px;
        height: 32px;
        border-radius: 10px;
        background: #0d8c30;
      }
      .uil-battery-demo-css .inner {
        position: relative;
        width: 45px;
        height: 19px;
        left: 38px;
        background: #00f1ff;
      }
      .uil-battery-demo-css .inner:nth-of-type(2) {
        top: -53px;
        animation: uil-battery-demo-anim1 1.5s linear infinite;
      }
      .uil-battery-demo-css .inner:nth-of-type(3) {
        top: -50px;
        animation: uil-battery-demo-anim2 1.5s linear infinite;
      }
      .uil-battery-demo-css .inner:nth-of-type(4) {
        top: -47px;
        animation: uil-battery-demo-anim3 1.5s linear infinite;
      }
      .uil-battery-demo-css .inner:nth-of-type(5) {
        top: -44px;
        animation: uil-battery-demo-anim4 1.5s linear infinite;
      }
      .uil-battery-demo-css{
        display: inline-block;
      }
    </style>
    <div class='uil-battery-demo-css'>
      <div class="outer"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>
</html>

上の例ではアニメーションタグだけの電池のマークを付けってみました。


このアニメーションタグもトランジションと同じ効果で静的なウェブサイトで動的な感じを与える機能ですね。でも、多く使えば、コンテンツの集中度を落としサイトが乱雑になる傾向があるので、適切に使えなければならないと思います。

◀前の投稿[CSS] トランスフォーム (transform)
次の投稿▶[CSS] 色スタイル、グラデーション
#css,#animation
「Study / Javascript, Jquery, Css」の他投稿
最新投稿