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

6560 ワード
アニメーション HTML scss CSS 初心者 HTML テキストリンク

この記事は

三(卍^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%移動する@keyframesをidouと名付けたよ。
ちなみに指定の意味はそれぞれこんな感じだ。

で、こいつを.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;の指定をする必要があった。
これやらないとすごい回り方する。

で、@keyframesはtransform: rotateってのを使ってるよ。
これ使うと要素を回転させることができるぞい。

今回は、0%→100%で、360度回転する@keyframesをguruguruと名付けて、
.manjiのanimationプロパティで0.5秒で一回転するような指定をしたぞ。

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

終わりに

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

マジ卍。（使い方あってる・・？）