cssの@keyframesアニメーションでガタゴト進む車を実装する

完成版デモ

See the Pen ガタゴト進む車 by kuma-onigiri (@kuma-onigiri) on CodePen.

実装イメージ

アニメーションは@keyframesを使います
１、車の画像を配置する
２、斜めに動くアニメーションをつける
３、上下にガタゴト動くアニメーションをつける

車を用意する

Illustratorで作った車をつかいます

ベースのHTMLとCSS

index.html

            <div class="move-animation">
                <div class="gata-gata-animation">
                    <img class="car" src="車の画像のパス">
                </div>
            </div>

main.css

.car {
    width: 75px; /* 車のサイズは適当に幅75pxくらい */
}

@keyframesは、1つの要素に複数のアニメーションをつけることはできないので、２段構えでつけています。
上下に揺れる用のgata-gata-animationクラスをつけた要素を、さらに<div>で囲って、動くアニメーション用のmove-animationクラスをつけてあげるのがポイントです。

斜めに動くアニメーションをつける

main.css

.move-animation {
    transform: translate(250px, 0px);

    animation: move 16s linear infinite;
}
@keyframes move {
    to {
        transform: translate(0px, 250px);
    }
}

初期位置はtranslateで右に250pxくらいずらした状態にしておきます。
そこから左下に動いていくアニメーションをつけます。時間は適当に16秒くらいにしてます。

上下にガタゴトうごくアニメーションをつける

main.css

.gata-gata-animation {
    animation: gata-goto .3s infinite;
}
@keyframes gata-goto {
    20% {
        transform: translateY(-2px);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
    }
    25% {
        transform: translateY(0px);
    }
    55% {
        transform: translateY(-1px);
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
    }
    60% {
        transform: translateY(0px);
    }
}

transformで上下に２回動くのを作り、それをinfiniteで延々と繰り返しています。
ちょっとバウンドする感じにしたいのでanimation-timing-functionをcubic-bezier(0.4, 0, 1, 1.3)にしています。

ここはブラウザの開発者ツールで調整できるのですが、
左の赤丸のところのマークをクリックするとベジエ曲線のグラフが出てくるので、ハンドルを動かして好きな動きにできます。
右の赤丸のところを上に盛り上がるようにすると、ぼよんって感じの動きになります。

おわり

アニメーションを２段構えにするのがポイントでした。
これを応用すれば、ぴょんぴょん動くアニメーションとかもできますね。