自分のサイトでキャラクターのスプライト画像でパラパラアニメのように歩く動きをつけて、画面の左から右へ少し蛇行しながら動くみたいなことをしたいな、、、と思って、やっていたらできたので実際にこのブログで表示しながらまとめてみたいと思います。
その１ 横の動き！
(^^)
その２ 縦の動き!
(^^)
この２つを合体してみます。
その３ 合体！！
(^^)
できたできたｗｗ
縦横それぞれのアニメを要素で重ねる方法と、CSSでカンマ区切りで指定する方法の２つを試してみましたが、どちらも同じ動きになりました。
このブログ上で一度パラパラアニメにもチャレンジしましたが、私のスキル不足のためここでは再現できませんでした。。。画像の処理の仕方なのかな。。。うーん、わからない。
よかったらパラパラアニメで作成した動くキャラは▼▼こちらのページ▼▼で確認してください。
パラパラ動作+横移動（%で位置指定）で動くようにしました。
内容はつまらないものばかりなので無視してください。タイトルにアニメテストがあるのですぐ見れます。
話は変わりますが、今回からコード表示はアコーディオンにしました。いろいろ頑張ったんですが、結局javascriptに頼ってしまいました。。。
CSSだけでなんとかするのはスキルが足りませんでした。。。
今回のコード
ウインドウがON・OFFします
CSSのアニメ設定
/*表示用外枠BOX*/
.xy_box{
position : relative;/*動く要素の起点にする親宣言*/
display : block;/*幅が調整できるプロパティで*/
overflow : hidden;/*はみ出しは表示しない*/
border : 3px solid red;/*枠線*/
width : 350px;/*横幅*/
height : 100px;/*縦幅*/
}
/*横の動き（x方向)*/
.x_move{
position : absolute;/*親要素を起点に動く*/
background : transparent;/*背景透明*/
display : block;/*幅と位置が調整できるプロパティで*/
animation-name : move_x;/*実行アニメの名前*/
animation-duration : 4s;/*動作時間*/
animation-timing-function: linear;/*同じ速さで*/
animation-iteration-count: infinite;/*繰り返し*/
animation-direction : alternate;/*行ったり来たり*/
}
/*縦の動き（y方向)*/
.y_move{
position : absolute;/*親要素を起点に動く*/
background : transparent;/*背景透明*/
animation-name : move_y;/*実行アニメの名前*/
display : block;/*幅と位置が調整できるプロパティで*/
animation-duration : 1s;/*動作時間*/
animation-timing-function: linear;/*同じ速さで*/
animation-iteration-count: infinite;/*繰り返し*/
animation-direction : alternate;/*行ったり来たり*/
}
/*CSSでアニメ合体*/
.xy_move{
position : absolute;/*親要素を起点に動く*/
background : transparent;/*背景透明*/
display : block;/*幅と位置が調整できるプロパティで*/
animation-name : move_x,move_y;/*実行アニメの名前*/
animation-duration : 4s,1s;/*動作時間*/
animation-timing-function: linear,linear;/*同じ速さで*/
animation-iteration-count: infinite,infinite;/*繰り返し*/
animation-direction : alternate,alternate;/*行ったり来たり*/
}
/*animationの中に複数カンマ区切で指定できます。
動作が同じでもプロパティは書きます。
カンマ区切で半角あければショートハンドも可能*/
/*合体の動作だけ必要なら個別に作成せずに合体だけ書けばOK*/
/*＠keyframesは動き分必要ですが、transformで細かく指定すると
１つで行けるかもしれません。今回うまく行きませんでした。*/
@keyframes move_y {/*縦のアニメの設定*/
0%{
top : -10px;/*始まりの位置*/
}
100%{
top : 75px;/*終わりの位置*/
}
}
@keyframes move_x {/*横のアニメの設定*/
0%{
left : 0px;/*始まりの位置*/
}
100%{
left : 373px;/*終わりの位置*/
}
}
/*＠keyframesの位置はアニメにした要素の左上が起点で判定されるので、
外枠きっちりにすると沈み込みます。フォントや記入するもので調整が必要です。*/
HTML側
<!-- やりかた１ 合体アニメの記述-->
<div class="xy_box">
<!--↓↓↓のclass名を変えればアニメが変わります-->
<div class="xy_move">
(^^)
</div>
</div>
<!-- やりかた２ 要素を重ねて合体アニメ-->
<div class="xy_box">
<div class="x_move">
<div class="y_move">
(^^)
</div>
</div>
</div>
CSSでカンマ区切りしても、要素を重ねても動きますが、CSSでやったほうが結果的にコード量は少なくなります。
別々に使うものがあって、合体させるときは要素を重ねるほうが楽になりますかね。
あと、<div class="x_move y_move">と一つの要素に別々のアニメを設定して試してみましたが、後優先なのでこの場合、縦にしか動きませんでした。 この方法では合体不可能ということですね。
