【CSS】@keyframesって何?CSSのアニメーションを知る

こんにちは。
CSSのアニメーションに関するポストです。

その中でも、@keyframesという指定方法について学んでみましょう。

@keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。
引用:@keyframes – CSS | MDN

まぁ、これだけみても何のことかしっくり来ませんね。

構文は単純

@keyframes <identifier> {
    [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

identifierがキーフレームのリストを識別します。
fromはアニメーションの始まり、toがアニメーションの終わりです。

サンプル

まぁ見てみないとなんとも言えないですよね。
※サンプルには各ブラウザ対応のベンダープレフィックスを省略しています

h1 {
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

上の例では、h1をスライドインするためのコードサンプルです。
h1でkeyframeの識別名slideinを指定しています。
この時点でループの設定なども可能です。

そして@keyframesで動作を定義しているわけですが、fromからtoへアニメーションします。

途中さらにフレームを作りたい場合は、

75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
}

上記のように挟むことで可能です。

工夫次第ではこんな感じも

hoverすることで値の変更をいれているため、上記ボックスにホバーするとロケットが近づくようになっています。
これもCSSのアニメーションのみで出来ています。

まとめ

jqueryのアニメーションでしていたことが、CSS3ではとてもシンプルに実装できます。もちろんjavascriptを勉強しなくてよいわけではありません。
これらの技術は、javascriptと組み合わせることで強い応用力があると思っています。動き自体はCSSで定義し、トリガーをjavascriptで管理することで非常に柔軟な使い方ができそうです。

みなさんも是非お試しください!

参考:12 Awesome CSS3 Features That You Can Finally Start Using | Tutorialzine

フォローして続編をチェック

@universionsをフォロー