CSS animationで複数指定する方法
CSS3からanimationが使えるようになり、サイト上で複雑な動きをつけられるようになりました。
とはいえ、実際に複雑な動きをつけるのは難しい!
いえ、難しくありません。1つの要素に複数のanimationを指定することで複雑な動きをカンタンにつけることができます。
そんな「CSS animationで複数指定する方法」を説明します。
結論
animationを複数指定するときは「,」を使います。
animation:1つめのアニメーション,2つめのアニメーション
解説
完成イメージ
ゴムボールが弾んでいるようなアニメーションです。
これを1つのアニメーションだけで指定しようとすると複雑ですが、複数のアニメーションを指定すると意外とカンタンに作ることができます。
これは2つのアニメーションからできています。
1つめ.横にまっすぐ動く
CSS
animation: ugoki1 4s linear infinite alternate;
2つめ.縦に弾む
CSS
animation: ugoki2 1s ease-in infinite alternate;
複数指定にする
これを一つに指定すると完成です。
html
<div class="animationwrap"><div class="animation"></div></div>
CSS
.animationwrap{
border: 1px solid #f2f2f2;
height: 100px;
position: relative;
overflow: hidden;
}
.animationwrap>div{
width: 20px;
height: 20px;
background: red;
position: absolute;
border-radius: 50%;
}
.animation{
animation: ugoki1 4s linear infinite alternate,ugoki2 1s ease-in infinite alternate;/*animationの複数指定はコレ*/
}
@keyframes ugoki1{
0%{
left:0%;
}
100%{
left:100%;
}
}
@keyframes ugoki2{
0%{
top:0%;
}
100%{
top:100%;
}
}
@keyframesの使い方は以下の記事で詳しく説明しています。
まとめ
animationを複数指定するときは「,」を使います。
animation:1つめのアニメーション,2つめのアニメーション
以上、CSS animationで複数指定する方法でした。