CSS3でのアニメーション実装方法（フェードインとユラユラ揺らす）

画像をユラユラ揺らす方法を調べて実装したので、その方法を書き残しておきます。
今回は CSS3 で下記のようなアニメーションを実装しました。

---

＊参考

• MDN web docs / animation
• MDN web docs / transition

---

＊環境

• MacOS
• CSS3

---

＊アニメーションについて

実装する前に、まずアニメーションを付けるには2種類あるということを理解しておきます。

• animation
  繰り返しのループや自動再生が可能。
  keyframesを使うことで、フェードインなど動きを細かく指定することができる。
  
  
• transition
  繰り返しのループや自動再生ができない。
  hoverやclickなどのアクションで動作する。
  スタイルの往復が可能で、トグルボタンやメニューなどに使われる。
  

---

＊animation プロパティ

animationプロパティでは下記の設定をすることができます。

• animation-name
  アニメーションを適用するkeyframesの名前を指定して紐づける。
  
  
• animation-duration
  アニメーションの再生時間を指定する。
  0sが初期値で1sや100msなどの単位で指定可能。
  マイナスは指定不可。（0として扱われる）
  
  
• animation-delay
  アニメーション開始までの待ち時間を指定する。
  0sが初期値で1sや100msなどの単位で指定可能。
  マイナスは指定不可。（0として扱われる）
  
  
• animation-timing-function
  アニメーション実行中の速度変化を指定できる。
  ease/ease-in/ease-out/ease-in-out/linearを指定可能。（初期値はease）
  
  
• animation-iteration-count
  アニメーションを繰り返す回数を指定できる。
  初期値は1。infiniteを指定すると繰り返し再生され続ける。
  
  
• animation-direction
  アニメーションを2回以上繰り返す際、再生方向を変更したいときに指定する。
  normal/alternate/reverse/alternate-reverseを指定可能。
  
  
• animation-fill-mode
  アニメーションの実行後の状態を維持したままにするか指定できる。
  none/forwards/backwards/bothを指定可能。
  forwardsだとアニメーション終了後の要素は最後のkeyframesの状態になる。
  
  
• animation-play-state
  アニメーションの実行や停止を指定できる。（:hover時に停止させるなど）
  running/pausedを指定可能。
  
  
• @keyframes
  アニメーションの動きを指定できる。
  fromで開始、toで終了のアニメーションを指定。
  途中経過の動きとして30%なども追加することができる。
  

---

＊transition プロパティ

• transition-property
  transitionの対象になるCSSプロパティを指定する。
  
  
• transition-duration
  アニメーションの再生時間を指定する。
  0sが初期値で1sや100msなどの単位で指定可能。
  マイナスは指定不可。（0として扱われる）
  
  
• transition-timing-function
  アニメーション実行中の速度変化を指定する。
  ease/ease-in/ease-out/ease-in-out/linearを指定。（初期値はease）
  
  
• transition-delay
  アニメーション開始までの時間を指定する。
  0sが初期値で1sや100msなどの単位で指定可能。
  マイナスは指定不可。（0として扱われる）

---

＊その他CSSプロパティ

• opacity
  opacityで透明度を指定することができる。
  0で透明、1.0で不透明を指定可能。
  
  
• transform
  要素を変形させる。translateYで縦方向、translateXで横方向を指定可能。
  translateY(20px)だと下方向に20pxの位置、translateY(0)で元の位置、translateY(-20px)で上方向に20pxの位置に移動する。
  

---

＊上からのスライドイン

上からのスライドインで要素を表示させます。
animation-nameには@keyframesに指定した名前を付けます。@keyframesではfromにアニメーション開始前のスタイル、toにアニメーション終了後のスタイルを指定します。

下記では2秒間で1回アニメーションを再生するようにしています。その2秒間のうち、最初は上方向20pxの位置から徐々に元の位置に戻ります。同時に透明から不透明にも変化させているので、フワッとした印象になります。

• CSS

.effect-fade-top {
  animation-name: fade-in-top;
  animation-duration: 2s;        // アニメーションの再生時間
  animation-iteration-count: 1;  // アニメーションを繰り返す回数
}

// アニメーションの動きを設定
@keyframes fade-in-top {
  from {
    opacity: 0;                    // 透明にする
    transform: translateY(-20px);  // 上方向に20px
  }
  to {
    opacity: 1;                    // 不透明にする
    transform: translateY(0);      // 元の位置に戻す
  }
}

• HTML

<div>
  <div class="btn-content">
    <button class="blue-btn effect-fade-top">Button</button>  
  </div>
</div>

---

＊右からスライドイン

右からのスライドインで要素を表示させます。
先ほどの実装とほぼ同様なのですが、最初の要素の位置を右に変更します。translate3dは X軸、Y軸、Z軸を3Dで指定できます。パーセントを指定すると自分の要素の幅ぶん移動します。（親要素ではないです）

• CSS

.effect-fade-side {
  animation-name: fade-in-side;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes fade-in-side {
  from {
    opacity: 0;                          // 透明にする
    transform: translate3d(100%, 0, 0);  // X軸に自分の要素の幅ぶん移動
  }
  to {
    opacity: 1;                          // 不透明にする
    transform: translateY(0);            // 元の位置に戻す
  }
}

• HTML

<div>
  <div class="btn-content">
    <button class="blue-btn effect-fade-side">Button</button>  
  </div>
</div>

---

＊ユラユラ揺れる

要素が常にユラユラ揺れているようにします。
先ほどまでは3行でanimationの指定をしていましたが、省略して1行でまとめて書くこともできます。
下記ではユラユラ揺れるアニメーションと、フワッと表示されるアニメーションの2種類を付けています。

shakeのアニメーションは 4 秒間でfromからtoまでの一連の動きを実行し、infiniteで連続実行するようにしています。
fromとtoはパーセントでも表すことができ、0%と100%で書くのと同様になります。アニメーション実行の途中経過で別のスタイルを指定したい場合はパーセントで指定して実現することができます。
transformプロパティのrotate()を使うと要素を回転することができます。今回は動きを滑らかするために 3 段階でスタイルを指定しています。

• CSS

.effect-shake {
  animation: shake 4s infinite, fade-shake 2s 1;
}

@keyframes shake {
  0% {
    transform: rotate(15deg);    // 中心を基準に15度回転
  }
  50% {
    transform: rotate(-15deg);   // 中心を基準に-15度回転
  }
  100% {
    transform: rotate(15deg);   // 中心を基準に15度回転
  }
}

@keyframes fade-shake {
  from {
    opacity: 0;
    transform: translateY(-20px), rotate(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-15deg);
  }
}

• HTML

<div>
  <div class="btn-content">
    <button class="blue-btn effect-shake">Button</button>  
  </div>
</div>

---

＊所感

業務でのアニメーション実装経験はなかったので、コード綺麗さには自信がなく、もっと適切な実装方法があるかもしれないです。アニメーションの実装についての仕組みは理解できたので、どの要素に使うかといったことをよく考慮してアニメーションを付けていきたいと思っています。
JavaScript フレームワークの Vue.js ではアニメーションを実装するための機能も備わっているため、場合によってはそちらのほうが簡単に実装できるかもしれないです。

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email