CSSアニメーションの超基礎

CSSアニメーションの特殊例は避けて超基本的な内容を記してみます。

サンプルはこちら。

See the Pen njaCe by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

リンクのhover時にリンクの背景色を点滅させるようなアニメーションを行っています。

CSS(Sass)

a {
  font-weight: bold;
  color: #000;
  &:hover {
    color: #fff;
    @include animation(color 1s infinite linear);
  }
}

@-webkit-keyframes color {
  0% {background-color: #00f}
  50% {background-color:#0f0}
  100% {background-color:#00f}
}

要は<a>タグのhoverにある「animation」と、後半の「keyframes」です。

「animation」はベンダープレフィックスが要るためSassの記法になっていますが、ここの定義を分かりやすく分解すると下記の記述を行っています。

@include animation(
    color       //再生するキーフレームの指定
    1s          //アニメーション1周の時間
    infinite    //アニメーションさせる回数。infinite=永遠
    linear      //アニメーションのイージング。linear=直線的
);

後半の「keyframes」が実際のアニメーションの内容になります。

0%から始まり100%で終わる形で、中は変化させるスタイルを記述します。
アニメーションされるのは数値で表されるプロパティのみで、displayのように文字列で属性値を入れるプロパティはアニメーションしません。

今回はhover時にanimationを入れていますが、hoverでなく平時にanimationを入れれば常時アニメーションするようになります。