【CSS】簡単なアニメーションの作り方【animation】【keyframes】

今まで CSS で簡単にアニメを作れるという話を書いてきた．

• 【CSS】簡単なアニメーションの作り方【transition】
• 【CSS】簡単なアニメーションの作り方【transform】

CSS だけを使ってもアニメーションは作れる

transform の説明では変化の終わりを hover で実現していたが，何もしなくてもデザインを動かすためには animation を使う．

animation で図形を動かしてみる

下部の点線(アンダーライン)を流れるように表示する

postion: absolute を指定して，left で位置を動かす．

keyframes によるアニメーション

animation: で秒数(1秒)，回数(無限)，動き方(線形)を指定して，keyframes: で開始位置(左端を-20%)と終了位置(左端を原点)を指定する．

これにより，アニメーションが表示される．

CSS

.win {
  overflow: hidden;
  padding: 4px;
  display: inline-block;
}
#movingline {
  position: relative;
  overflow: hidden;
  padding: 4px;
}
#movingline::after {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  border-bottom: dotted 2px blue;
  animation: moving 1s infinite linear;
  content: "";
  overflow: hidden;
}
@keyframes moving {
  from {
    left: -20%;
  }
  to {
    left: 0%;
  }
}

HTML

<div class="c">
  <span class="win">
    <span id="movingline">
      下点線が流れるアニメーション
    </span>
  </span>
</div>

回転させる

loading... と待機中に使える CSS を参考サイトを元に簡単化して作ってみた．
(より小さくして，白背景でも大丈夫なように改造してみた．)

keyframe で拡大・縮小と色相環を変更するアニメーション

filter: hue-rotate というのは色相環を回転させるもの．これを一周させて色を変えていく．

box-shadow では 4つ影をつけている．

animation-delay は〇の位置によって数字が入ってずらされていく．
アニメーションが始まる時間が，一番上は0.1s遅延．次が0.2s遅延と最後は1s遅延するので回転しているように見える．
これを思い付いた人は素晴らしい．

※) 参考サイト
CSSで作るローディングアニメーション40選〜待ち時間を楽しくするテクニック

CSS

.loading {
  width: 100px;
  height: auto;
  margin: 20px auto;
  background-color: #FFF;
  animation: colorrotate 5s linear infinite;
}
@keyframes colorrotate {
  from {
    filter: hue-rotate(0deg)
  }
  to {
    filter: hue-rotate(360deg)
  }
}
.loader {
  position: relative;
  width: 60px;
  height: 60px;
}
.loader span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc(36deg * var(--i)))
}
.loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #9C9;
  box-shadow: 0 0 2px #9C9,
    0 0 4px #9C9,
    0 0 6px #9C9,
    0 0 8px #9C9;
  animation: animatezoom 1s linear infinite calc(.1s * var(--i));
}
@keyframes animatezoom {
  0% {
    transform: scale(1)
  }
  80%,
  90% {
    transform: scale(0)
  }
}

HTML

<div class="loading">
  <div class="loader">
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
    <span style="--i:4;"></span>
    <span style="--i:5;"></span>
    <span style="--i:6;"></span>
    <span style="--i:7;"></span>
    <span style="--i:8;"></span>
    <span style="--i:9;"></span>
    <span style="--i:10;"></span>
  </div>
</div>