CSSanimateの作り方

CSSanimateとは

CSSanimateとは、jQueryやJSライブラリを使わずにwebサイトに動的な動きをプラスするCSS3の技術である

@keyframesについて

CSSanimateには@keyframesを使います

sample.css

@keyframes free_name{
  /* 適当な名前でもOK、
    日本語も使えるけどあまり使わない方がいい */
  0%{
    /* アニメーションのはじめ */
  }
  100%{
    /* アニメーションの終わり */
  }
}

free_nameの部分はどんな名前でもいい
0%がアニメーションの始まり
100%がアニメーションの終わりと覚えよう

これを実際に動かすにはanimationというプロパティが必要になる下ではboxとい名前のクラスにかけて見る

sample.css

.box{ 
  animation:free_name 5s ease -2s infinite alternate;
}

右から

@keyframesの横に書いてあるanimation-nameの値、
どのくらいの時間をかけて再生をするのかanimation-durationの値、
animation-timing-functionの値、
どのくらい時間が経ったらアニメーションを発動するのかanimation-delayの値、
animation-iteration-countの値、
animation-directionの値

をスペースで区切って指定する

試しに作ってみよう

index.html

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">
    </div>
  </body>
</html>

style.css

.box{
  background-color: red;
  animation:anime 1s ease-in-out 0s infinite alternate;
  height: 50px;
  }
@keyframes anime{
  0%{width:10px}
  100%{width:200px}
}

するとこいう風に動く

~~Undertaleのような~~ RPGのような体力ゲージのようなアニメーションを作ることができる。
@keyframes animeの部分でアニメーションを指定。はじめは横の長さが10pxだが、最後は200pxになるアニメーションを1sかけて再生する。
ease-in-outで車のように加速して減速するするようにしてある。この部分をease-outにするとだんだんと高速に、ease-inにするとだんだんと減速していく。
infiniteで無限に再生してalternateで行ったり来たりする。

こんな感じ簡単にできるしアレンジを加えることもできる。