用途
新着
履歴
分類

CSS 左右に行き来するアニメーション

CSS 左右に行き来するアニメーション
車、電車などホームページでちょっとした演出を施したいときのサンプルです。

CSSのアニメーションを利用して、画像を左右に行き来させています。

画像を変えればいろんなものに応用ができます。

一部jQueryを使ってますが、ほぼCSSのアニメで表現しています。

電車を左右に行き来させるパターン

もっと電車ぽく上下のアニメーションをつけるとこうなります。

ポップさが増しますね。

CSSは以下の3つになります。

.demo_item{
	width: 50px;
    height: 50px;
    border-radius: 10px;
    background-image: url(/img/demo/car/101.png);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    

}
.demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}


.demo_stage{
    position: relative;
    width: 100%;
    height: 65px;
    top: 0px;
    display: block;
	border-bottom: solid #777 1px;
}


.demo_wrap{
	display: block;
    position: absolute;
    top: 20px;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
	margin-right: -25px;
}

ここまでは画像の指定やアニメの設定です。

次はdata-orderという自前の属性がついたらアニメの指定を変える記述です。

.demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.demo_wrap[data-order="right"] {
    animation-name: GoRight;
}

[data-order="right"] > .demo_item {
    transform: rotateY(180deg);
}

最後に行って、帰って、縦揺れのアニメの動きです。

@keyframes GoLeft {
    0% {
        right: 10%;
    }
    100% {
        right: 90%;
    }
}
@keyframes GoRight {
    0% {
        right: 90%;
    }
    100% {
        right: 10%;
    }
}

@keyframes upDown {
    0% {
        top: 0;
    }
    100% {
        top: 3px;
    }
}

以下のHTMLで上記の縦揺れのサンプルが動きます。

<div class="demo_stage">
	<div class="demo_wrap" data-order="left">
	<span class="demo_item anime"></span>
	</div>
</div>

class="demo_item anime"のanimeクラスに縦揺れのアニメが設定されてます。

最後に行き来するタイミングでCSSのアニメの指定を入れ替えるJSはこちら。

$(document).ready(function(){
    $('.demo_wrap').on('animationend', function () {
        if ($(this).attr('data-order') === 'left') {
            $(this).attr('data-order', 'right');
        } else {
            $(this).attr('data-order', 'left');
        }
    });
});
コード選択
公開 2019-07-28 14:44:36
このページの二次元コード
CSS 左右に行き来するアニメーション

人気のサンプル

search -  category -  about
© 2024 kipure
Top