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の使い方は以下の記事で詳しく説明しています。

CSSのanimationのkeyframesの使い方【サンプルあり】

CSS3からanimationが使えるようになり、サイト上に複雑な動きをつけられるようになりました。使ってみたいけど、複雑でちょっと難しい!?そんなあなたのために、 animationの基本中の基本であるkeyframesについて説明します。

この記事を読む