CSSのアニメーションを利用して、画像を左右に行き来させています。
画像を変えればいろんなものに応用ができます。
一部jQueryを使ってますが、ほぼCSSのアニメで表現しています。
電車を左右に行き来させるパターン
もっと電車ぽく上下のアニメーションをつけるとこうなります。
ポップさが増しますね。
CSSは以下の３つになります。
.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クラスに縦揺れのアニメが設定されてます。
