はじめに
keyframesを使ったcssでのアニメーションは、gif画像の埋め込みと比べると読み込み速度も早く、パフォーマンスも良く、動きも滑らかです。
gif のようにどのようなアニメーションでも表現できるわけではありませんが、
1. 出現時のみ強調されたアニメーションが表示される
2. 以降、別のアニメーションがループして表示される
といったようなカスタマイズが可能なので、その実装方法を紹介します。
サンプル
だいぶ荒いですが、こんなイメージです。
コードは JSFiddle で公開していますので、実際の動作もこちらでご確認ください。
コード説明
ある程度カスタマイズできたほうが便利だと思うので、軽く説明します。
html
main.html
<div class="container container-open">
<span class="elem-open-1 elem-common">N</span>
<span class="elem-open-2 elem-common">E</span>
<span class="elem-open-3 elem-common">W</span>
</div>
html は上記の通りです。N, E, W の 3 文字の動きを少しずつずらすために、別のclassを付けます。
回転して表示する
main.css
@keyframes open-container-anim {
0% {
transform: scale(0) rotate(-90deg);
}
60% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
.container-open {
animation: open-container-anim 600ms alternate;
}
まずは、回転させながら大きくします。
keyframes で transform を指定して、大きくしながらかつ、90°回転させて全体を表示させます。
表示タイミングだけ NEW の文字を強調する
@keyframes open-elem-anim {
0% {
bottom: 0;
color: red;
transform: scale(1);
}
60% {
bottom: 5px;
color: yellow;
transform: scale(1.2);
}
100% {
bottom: 0;
color: red;
transform: scale(1);
}
}
.elem-open-1 {
animation: open-elem-anim 600ms alternate 400ms forwards;
}
.elem-open-2 {
animation:
open-elem-anim 600ms alternate 500ms forwards;
}
.elem-open-3 {
animation:
open-elem-anim 600ms alternate 600ms forwards;
}
container が表示されるまで 600ms としたので、大体回転し終わるくらいから強調アニメーションを開始します。それぞれの要素で、400ms, 500ms, 600ms の delayをかけているので、左の文字から順に大きく強調されます。
表示タイミングのアニメーションが終わったら次のアニメーションをループ実行させる
@keyframes idle-anim {
0% {
bottom: 0;
color: red;
}
50% {
bottom: 0px;
color: red;
}
100% {
bottom: 3px;
color: orange;
}
}
.elem-open-1 {
animation:
open-elem-anim 600ms alternate 400ms forwards,
idle-anim 600ms infinite 1200ms alternate;
}
.elem-open-2 {
animation:
open-elem-anim 600ms alternate 500ms forwards,
idle-anim 600ms infinite 1400ms alternate;
}
.elem-open-3 {
animation:
open-elem-anim 600ms alternate 600ms forwards,
idle-anim 600ms infinite 1600ms alternate;
}
先ほどの強調アニメーション(open-elem-anim)が終わった後、別のアニメーション(idle-anim)をループさせます。
ひとつ前のアニメーションに forward を指定し、次に別のアニメーションに繋げることができます。また、 idle-anim には infinite を指定しているのでループしてこのアニメーションが表示される寸法です。
ぜひカスタマイズして使ってみてください！