メモ:今更ながらCSSの@keyframesを使ったアニメーションを試す

CSSだけでアニメーションを作ることが出来る@keyframesの記述。

ブラウザの互換性を理由にして今まで勉強をサボってきたのですが、Can I UseによるとIE11を含めてすでに主要なブラウザには対応しているようなので、今更ながら書き方を調べて試してみました。

参考にしたページ

【CSS3】@keyframes と animation 関連のまとめ – Qiita

作例(画像のズーム)

See the Pen @keyframesアニメーション試作 by Kentan (@herrkf) on CodePen.

CSSの記述の詳細は、以下の通りです。

/* anime_zoomという名前のアニメーションを定義 */
@keyframes anime_zoom {
0% {transform: scale(1);} /* アニメ前の状態 */
100% {transform: scale(1.5);} /* アニメ後の状態 */
}

/* anime_zoomをどの要素に適用するか & 秒数などを定義 */
.scale img {
animation-name: anime_zoom; /* 上で定義したanime_zoomを使用 */
animation-duration: 20s; /* 20秒かけてアニメーションする */
animation-timing-function: linear; /* イージングなし */
animation-delay: 0s; /* ディレイなし */
animation-iteration-count: 10; /* 10回繰り返す */
animation-fill-mode: forwards; /* アニメ後の状態で停める */
}

下記のように省略して記述することも可能とわかりました。

.scale img{
animation: anime_zoom 20s linear 0s 10 forwards;
}
0