魔法少女サイト

これは、魔法少女になれなかった男の記録である。

ニートに学ぶCSS Animation演出講座 4時間目

あいさつ

f:id:yuki540com:20180503160414j:plain

どうもどうも、また会いましたね。風邪気味のyuki540です。

先日、東京に遊びに行ってきましたが体調不良により、2日で地元に帰ってしまいました。でも、めっちゃ楽しかったです!

また近々、東京にもう一回行くと思うので、今度は1週間ぐらい滞在したいです。

今回はどんな作る?

で、今回作るものですが、

↓ この花火(?)みたいな弾けた感じのものを作っていきたいと思います。

いろんなところで使えるアニメーションパターンだと思うので、ぜひ作ってみてください。

作ろう

最終的に出来上がるものはこちらになります。

はい。作っていきましょう。

マークアップ

今回は3種類の弾けるアニメーションを解説するので、.effect_type_1~.effect_type_3という風に要素を分けます。

僕はdivタグしか知らないので、クソマークアップに関しては指摘されても無視しますのでご理解ください。

<main class="stage">
  <!-- effect_type_1 -->
  <section class="effect effect_type_1">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
  </section>
      
  <!-- effect_type_2 -->
  <section class="effect effect_type_2">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
  </section>
      
  <!-- effect_type_3 -->
  <section class="effect effect_type_3">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
  </section>
</main>

スタイルをあてる

まずは、土台となる.stageのスタイルをあてていきましょう。

* {
  margin: 0;
  padding: 0;
}

/**
 * stage
 */
.stage {
  position: absolute;
  width: 100%; height: 100%;
  background-color: #D3C7C0;
}
.stage:before,
.stage:after { position: absolute; content: ""; display: block; }

.stage:before {
  top: 20px; left: 20px;
  width: calc(100% - 40px); height: calc(100% - 40px);
  border: dashed 5px #635256;
  border-radius: 30px;
  box-sizing: border-box;
  opacity: 0.3;
}
.stage:after {
  width: 400px; height: 400px;
  top: calc(50% - 200px); left: calc(50% - 200px);
  border-radius: 50%;
  background-color: #635256;
}

.stage:beforeで画面の周りに破線を引いて、.stage:afterで後々アニメーションの繋ぎで使う茶色のボールを作っています。

今回の重要なのは、.effect_type_1~.effect_type_3なので、.stageは好きなように装飾してもらっても大丈夫です。

次に.effect_type_1にスタイルをあてていきます。

/**
 * effect
 */
.effect {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  overflow: hidden;
}
.effect div {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.effect div:after {
  content: ""; display: block;
  position: absolute;
  opacity: 0;
}
.effect div:nth-child(1) { transform: rotate(0deg);   }
.effect div:nth-child(2) { transform: rotate(45deg);  }
.effect div:nth-child(3) { transform: rotate(90deg);  }
.effect div:nth-child(4) { transform: rotate(135deg); }
.effect div:nth-child(5) { transform: rotate(180deg); }
.effect div:nth-child(6) { transform: rotate(225deg); }
.effect div:nth-child(7) { transform: rotate(270deg); }
.effect div:nth-child(8) { transform: rotate(315deg); }


/*** effect_type_1 ***/
.effect_type_1 {
  top: calc(50% - 200px); left: calc(50% - 200px);
}
.effect_type_1 div:after {
  top: 5px; left: calc(50% - 20px);
  border-top: solid 70px #635256;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  transform: translateY(130px);
}

.effectで共通の部分をまとめてスタイルをあてています。

400 x 400の円を作って、子要素を45degずつ回転してるだけですね。

.effect_type_1では三角形を弾けさせたので、borderで縦長の三角形を作っています。

.stage:afterで隠れている&opacity: 0;で非表示になっているので、確認しづらいでしょうがこんな感じになってます。

f:id:yuki540com:20180503172606p:plain

また、初期状態ではtranslateYで中央に子要素を寄せています。

次に.effect_type_2にスタイルをあてていきましょう。

/*** effect_type_2 ***/
.effect_type_2 {
  top: 50%; left: calc(50% - 400px);
}
.effect_type_2 div:after {
  top: 0px; left: calc(50% - 40px);
  width: 40px; height: 40px;
  background-color: #8db3b1;
  border-radius: 50%;
  transform: translateY(170px);
}

.effect_type_2は、中央から少し左下にズレた位置に配置して、弾けさせる子要素は円にしています。 f:id:yuki540com:20180503173957p:plain

次に.effect_type_3にスタイルをあてていきましょう。

/*** effect_type_3 ***/
.effect_type_3 {
  top: calc(50% - 400px); left: 50%;
}
.effect_type_3 div:after {
  top: 0px; left: calc(50% - 20px);
  width: 40px; height: 40px;
  background-color: #9994A6;
  transform: translateY(150px);
}

.effect_type_3は、中央から少し右上にズレた位置に配置して、弾けさせる子要素は四角形にしています。

f:id:yuki540com:20180503174047p:plain

これでレイアウト的には完成です。

アニメーションさせよう

では、アニメーションさせていきましょう。

/*********************************************************************************
 *  animation
 *********************************************************************************/

/*** stage ***/
.stage:after { animation: hidden-ball 0.6s ease 0s forwards; }

/*** effect_type_1 ***/
.effect_type_1 div:after {
  animation:
    fadein 0.3s ease 0.5s forwards,
    show-type-1 0.6s ease 0.5s forwards;
}

/*** effect_type_2 ***/
.effect_type_2 { animation: rotate360 4s ease 0.6s forwards; }
.effect_type_2 div:after {
  animation:
    fadein 0.3s ease 1.1s forwards,
    show-type-2 0.6s ease 1.1s forwards;
}

/*** effect_type_3 ***/
.effect_type_3 div:after {
  animation:
    fadein 0.3s ease 1.7s forwards,
    show-type-3 0.6s ease 1.7s forwards;
}


/*********************************************************************************
 *  keyframes
 *********************************************************************************/
@keyframes hidden-ball {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(0); }
}
@keyframes show-type-1 {
  from { transform: translateY(130px); }
  to   { transform: translateY(-75px); }
}
@keyframes show-type-2 {
  from { transform: translateY(170px); }
  to   { transform: translateY(-40px); }
}
@keyframes show-type-3 {
  from { transform: translateY(150px) rotate(0deg); }
  to   { transform: translateY(-40px) rotate(270deg); }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

単純なので説明する必要はないとは思いますが、一応説明しますと、

hidden-ballキーフレームで、.stage:afterをバイーンとした感じで画面から消します。

次にshow-type-1, fadeinキーフレームで.effect_type_1 divを弾ける感じでアニメーションさせています。(よく使いそうなキーフレームは、fadeinのように細かく分けて、カンマ区切りでanimationプロパティに適用するようにすると、色々便利です)

.effect_type_2 divも同じようにshow-type-2, fadeinキーフレームで弾けた感じでアニメーションさせますが、rotate360キーフレームで、.effect_type_2自体も回転させながら表示しています。

.effect_type_3 divは、show-type-3, fadeinキーフレームで四角形が回転しながら、弾けたアニメーションをさせています。

終わり

どうでしょう?上手く動きましたか?

上手くいかない方は、こちらのコードを参照しながらもう一度試してみてください。

さいごに

この記事を書いてる途中に気づきましたが、safariではborder-radius: 50%; overflow: hidden;をしても、円状に非表示してくれないみたいですね。

f:id:yuki540com:20180503181332p:plain

safariでは上手く動きませんが、アニメーションを作るときのヒントにでもなれば幸いです。

最後まで見てくれてありがとうございました。

できるだけ、簡単なものを作って記事に書いていく予定なので次回も見てくれると嬉しいです。

じゃーねー。

FANBOX始めました。)

f:id:yuki540com:20180503181755p:plain f:id:yuki540com:20180503181817p:plain