CSSアニメーションことはじめ

CSSでアニメーションをしたい

JavaScriptで色々計算して、アニメーションさせるの、ちょっと面倒くさいですよね。
でも、CSSでアニメーションが書けるんですよ。

例えば、赤い四角をFadeInしたい

最初は透明なんだけど、だんだん赤くなっていく矩形を表現したいとしましょう。
その時は、animation-duration で時間を指定し、animation-name でアニメーションの名前を指定します。
アニメーションの名前？　@keyframes でどのくらいの時に、どの値になっているか、を表現したいときに使います。

<div id="base"></div>

#base {
  width: 500px;
  height: 300px;
  background-color: #ff0000;
  animation-duration: 3s;
  animation-name: fadein;
}

@keyframes fadein {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

そう、これだけ、0秒の時は、赤色が透明ですが、徐々に赤くなって３秒後には真っ赤な四角になっていることでしょう。

下記に例を置いておきます。

https://codepen.io/sassy-the-encoder/pen/mdWBOgM

ちょっと移動させてみよう

transform を使えば、動かすことができますね。
ちょっとやってみましょう。
translateを使って横に動かしてみます。

<div id="base"></div>

#base {
  width: 500px;
  height: 300px;
  background-color: #ff0000;
  animation-duration: 1s;
  animation-name: move;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(300px);
  }
}

簡単ですよね？
下記に置いておきます。
https://codepen.io/sassy-the-encoder/pen/XWMepXb

rotateで回転とかもできますよー。

ちょっとさわりだけ書いてみました。
皆さんもCSSでアニメーションをチャレンジしてみてください。