Edited at

[CSSアニメーション]三(卍^o^)卍←こいつのこれ→卍を回したい


この記事は

三(卍^o^)卍

三三(卍^o^)卍

三三三(卍^o^)卍

こいつ、すごいかわいい。

すごいかわいいので、動かしたくなった。


See the Pen
ドゥルルルルル
by Mayu Mameuda (@mayu-mameuda)
on CodePen.


まずは走り去らせたい

三(卍^o^)卍

↑この部分をアニメーションでも表現したい。たぶん高速で左から右に流れて行く動きなはず。


早速作る

HTMLとSCSS。


dululu.html

<div class="dululu">

<div class="dululu__box">
三(卍^o^)卍ドゥルルルルルルルル
</div>
</div>

.dululuの中に.dululu__boxを入れて、その中に三(卍^o^)卍を入れたよ。


dululu.scss

.dululu{

width:500px;
font-family:sans-serif;
&__box{
animation: idou 2s linear infinite;
}
}

@keyframes idou{
0% { transform:translateX(0%); }
100% { transform:translateX( 100%); }
}


.dululuのwidthを決めて、その中を.dululu__boxが走って行くようにする。

そこで.dululu__boxに、@keyframesを指定するよ!

今回は、0%→100%で、横(translateX)に100%移動する@keyframesidouと名付けたよ。

ちなみに指定の意味はそれぞれこんな感じだ。

で、こいつを.dululu__boxに指定するぞ。

2sというのは2秒のこと。つまり、2秒間で左から右に三(卍^o^)卍が走り抜けるようになったぞ。


手を回す

さて、手を回すためにはこの部分にクラスをつけなきゃなんないのだ。

つまりHTMLはこう。


dululu.html

<div class="dululu">

<div class="dululu__box">
三(<span class="manji"></span>&nbsp;^o^)<span class="manji"></span>ドゥルルルルルルルル
</div>
</div>

なんかバラバラでよくわからんやつになってしまったが、

とりあえず<span>タグで囲ったぞい。

ちなみに&nbsp;ってのは半角スペース入れるための呪文だよ。

半角いれないと回した時なんとなくキモかったので入れた。


手をぐるぐるするSCSS

手の部分のSCSSはこう。


guruguru.scss


.manji{
display:inline-block;
animation: guruguru 0.5s linear infinite;
}

@keyframes guruguru{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


アニメーション以外に、display:inline-block;の指定をする必要があった。

これやらないとすごい回り方する。

で、@keyframestransform: rotateってのを使ってるよ。

これ使うと要素を回転させることができるぞい。

今回は、0%→100%で、360度回転する@keyframesguruguruと名付けて、

.manjiのanimationプロパティで0.5秒で一回転するような指定をしたぞ。

これで手の部分だけを回して、全体は左から右に移動する三(卍^o^)卍が完成したぞ!!!!


終わりに

実際動かしてみたら止まってた方がなんか可愛い気がした。

マジ卍。(使い方あってる・・?)