@mame_hashbill
Edited at

[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●

HTMLCSSscssアニメーション初心者


この記事について

CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。

タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`)


See the Pen
pozEpao by Mayu Mameuda (@mayu-mameuda)
on CodePen.

カップとかストローとかもCSSで作ってみた。

せっかくなのでカップとかのところも解説するぞ。

(アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜)

全国のタピオカ好きのみんなに見てほしい・・・・


カップのCSS

カップを構成している要素は大きく全部で5つ。

・カップ

・カップの蓋

・カップの中身

・ストロー

・タピオカ

こんな感じにパーツを分けて作ったよ。



パーツごとに作ってただただposition:absolute;で乗せていったんだぜ！

そんな難しいことしてないけどせっかく作ったから一個ずつ見ていくぞ！


その前にabsoluteのmixinつくる

今回はめちゃくちゃposition:absolute;するので、

記述を少なくするために@mixinをぶち込もう！！！

@mixin absolute($top:null, $right:null, $bottom:null, $left:null){

  position: absolute;

  @if $top != null{

    top: $top;

  }

  @if $right != null{

    right: $right;

  }

  @if $bottom != null{

    bottom: $bottom;

  }

  @if $left != null{

    left: $left;

  }

}

このmixinを入れることで、例えば

@include absolute($top:0,$right:0);

と書くと、

position:absolute;

top:0;

right:0;

ってコンパイルされるようになるよ！便利だね！！


カップ作るぞい

まずはカップの真ん中の部分を作るぞ〜〜〜！！

なぜかというとこいつを基準に他のパーツを乗っけていくからだよ！

<div class="cup">

  <div class="cup__bottom"></div>

</div>

HTMLはこれだけ。

SCSSはこんな感じだ！

%cup,.cup{

  //カップの台形

  position: relative;

  width: 120px;

  height: 200px;

  background: #fff;

  &:before{

    content: ' ';

    border-right: 20px solid #fff;

    border-bottom: 200px solid transparent;

    border-radius: 6px 0 0 0 ;

    @include absolute($top:0,$left:-20px);

  }

  &:after{

    content: ' ';

    border-left: 20px solid #fff;

    border-bottom: 200px solid transparent;

    border-radius:0 6px 0 0 ;

    @include absolute($top:0,$right:-20px);

  }

  //カップの底

  &__bottom{

    width: 120px;

    height: 40px;

    border-radius: 60px / 20px;

    background:#fff;

    @include absolute($bottom:-20px,$left:0);

  }

}


カップの台形

白い台形部分は、.cupクラスに:beforeと:afterで

横のほっそい三角の部分をつけて台形にしている感じ。

「なんでborder-bottomとborder-leftでこんな風に三角になるの・・・？」って思う人、

私もよくわからない・・。すまん・・・・・・。

誰か親切な方、教えてください（切実）。

とりあえず私はこのサイトを参考に作ったぞ・・

html – 台形を逆にするにはどうすればいいですか？

border-bottomで三角形の高さが指定できて、

border-rightとborder-leftで三角の細さを指定できるってことはわかった。うん。


カップの底

カップの底は横に長い楕円だぞ。

楕円は、widthとheightに対してborder-radiusを半分にしてあげればできるぞい。

今回だとここの部分。

  width: 120px;

  height: 40px;

  border-radius: 60px / 20px;

これでバキッと楕円ができるよ。

で、こいつをカップの台形の下につければカップの真ん中部分は完成だぞ。


カップの中身だぞ



カップとおんなじような感じなので、つぎはカップの中身のHTMLとCSSを作ろう。

  <!-- カップの中身 -->

  <div class="cup__inner-wrap">

    <div class="cup__inner-top"></div><!-- カップの中身の上の楕円 -->

    <div class="cup__inner"></div><!-- カップの中身の台形 -->

    <div class="cup__inner-bottom"></div><!-- カップの中身の下の楕円 -->

  </div>

このHTMLを.cupの中に入れるぞ。

ちなみに.cup__inner-wrapでわざわざ囲ってるのは、

.cup__innerはカップの中身の基準となるパーツなのでposition:relative;だけど、

最終的にカップの中身はposition:absolute;させてカップの中に入れたいからだよ！

で、SCSSはこうだぞ！

%cup,.cup{

  //本当はここにさっき書いたSCSSが入るけど長くなるので省略

  //カップの中身を囲うラップ

  &__inner-wrap{

    @include absolute($bottom:0,$left:-40px);

  }

  //カップの中身の台形

  &__inner{

    width: 110px;

    height: 150px;

    background: #c49a6a;

    margin-left: 45px;

    position: relative;

    z-index:2;

    &:before{

      content: ' ';

      border-right: 15px solid #c49a6a;

      border-bottom: 150px solid transparent;

      border-radius: 3px 0 0 0 ;

      @include absolute($top:0,$left:-15px);

    }

    &:after{

      content: ' ';

      border-left: 15px solid #c49a6a;

      border-bottom: 150px solid transparent;

      border-radius:0 3px 0 0 ;

      @include absolute($top:0,$right:-15px);

    }

  }

  //カップの中身の上の楕円

  &__inner-top{

    width: 140px;

    height: 30px;

    background-color: #deb887;

    border-radius: 70px / 15px;

    z-index:3;

    @include absolute($top:-12px,$left:30px);

  }

  //カップの中身の下の楕円

  &__inner-bottom{

    width: 110px;

    height: 30px;

    border-radius: 55px / 15px;

    background-color: #c49a6a;

    z-index:1;

    @include absolute($top:134px,$left:45px);

  }

}

さっきと同じような感じで、.cup__innerで台形を作って、

上と下に楕円をposition:absolute;で重ねてるよ。


カップの蓋だぞ



カップの上の部分は、二つの楕円と細い四角で構成してるぞ。

例のごとくposition:absolute;して.cupに乗せてくぞ。

  <!-- カップの蓋 -->

  <div class="cup__top"></div>

HTMLはこれだけだぞ！

で、SCSSはこんな感じ。

  //カップの蓋

  &__top{

    width: 170px;

    height: 30px;

    border-radius: 85px / 15px;

    background:#f5f5f5;

    z-index:3;

    @include absolute($top:5px,$left:-24px);

    &:before{

     width:170px;

     height:13px;

     background:#f5f5f5;

     content:' ';

     @include absolute;

    }

    &:after{

     @extend %cup__top;

     background:#fff;

     z-index:1;

     top:-15px;

     left:0;

     content:' ';

    }

  }

灰色の楕円を先に作って、:beforeで細い灰色の四角の部分を、

:afterで上の白い楕円を乗っけてるぞ。


ストロー！



ストローは2本の棒みたいな四角とちっこい楕円で構成してるぞ。

もうだいたいやり方わかってると思うからHTMLとSCSSだけ下に載せとくぞい。

  <!-- ストロー -->

  <div class="straw"></div>

  <div class="straw--bottom"></div>


// ストロー

%straw,.straw{

  background:#ea5550;

  width:20px;

  height:70px;

  z-index:5;

  @include absolute($top:-70px,$left:50px);

  &:before{

    content:' ';

    width: 20px;

    height: 4px;

    background-color: #ea5550;

    border-radius: 10px / 2px;

    @include absolute($bottom:-2px);

  }

  &:after{

    @extend %straw:before;

    background-color: #a73836;

    top:-2px;

  }

  &--bottom{

    @extend %straw;

    height:30px;

    top:30px;

    left:50px;

    z-index:4;

  }

}


ついにタピオカ

タピオカは.tapiokaで黒丸を作ってから、ただ.cup__innerの部分に

一粒ずつ例のごとくposition:absolute;してるだけだな。

    <div class="cup__inner">

      <div class="tapioka tsubu-1"></div>

      <div class="tapioka tsubu-2"></div>

      <div class="tapioka tsubu-3"></div>

      <div class="tapioka tsubu-4"></div>

      <div class="tapioka tsubu-5"></div>

      <div class="tapioka tsubu-6"></div>

      <div class="tapioka tsubu-7"></div>

      <div class="tapioka tsubu-8"></div>

    </div>


.tapioka{

  position:absolute;

  width:20px;

  height:20px;

  border-radius:20px;

  background:#000;

}

//それぞれの位置はtsubu-の方に書く

で、アニメーションは、一個の@keyframesでアニメーションを作ってから、

それを実行する時間をひと粒ずつ変えてるって感じだぞ！！

@keyframes tsubu {

  0% { transform:translateY( 0px); }

100% { transform:translateY( 3px); }

}

今回は、開始値が0px、終了値が縦軸で3pxとした。

つまり、開始位置からアニメーションを終えると3px分下がってる位置にタピオカがあるってこと。

【参考】

【CSS3】@keyframes と animation 関連のまとめ

この@keyframesを、.tsubu-1,2,3…のクラスに入れていくぞ。

animation:で以下のような記述を書いていこう！

今回は、この「1s」の部分をタピオカごとに変えていくぞ。

つまりこんな感じで0.1sくらいずつ時間をずらすんや！！！

.tsubu{

  &-1{

    bottom:4px;

    left:5px;

    animation: tsubu 1.2s ease-in-out infinite alternate;

  }

  &-2{

    bottom:-5px;

    left:28px;

    animation: tsubu 0.5s ease-in-out infinite alternate;

  }

  &-3{

    bottom:2px;

    left:55px;

    animation: tsubu 1s ease-in-out infinite alternate;

  }

  &-4{

    bottom:-2px;

    left:81px;

    animation: tsubu 0.6s ease-in-out infinite alternate;

  }

  &-5{

    bottom:34px;

    left:2px;

    animation: tsubu 0.8s ease-in-out infinite alternate;

  }

  &-6{

    bottom:25px;

    left:30px;

    animation: tsubu 0.7s ease-in-out infinite alternate;

  }

  &-7{

    bottom: 32px;

    left: 61px;

    animation: tsubu 0.9s ease-in-out infinite alternate;

  }

  &-8{

    bottom: 24px;

    left: 86px;

    animation: tsubu 1.1s ease-in-out infinite alternate;

  }

}

これで、一粒ずつちょっと違う動きをするふわふわタピオカが完成するぞい！

やった〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜✌︎('ω'✌︎ )

ただ、もろもろもっといいやり方がある気がするので、

もし親切な方がいたらもろもろ色々教えてくださ〜〜〜〜い！！！！！！


追記

隣に座ってる同僚がCSSでにゃんこつくって動かす記事を書いたよ！！！！！！

[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす　〜作る編〜

めっちゃ癒されるし勉強になるのでこっちもよろしくな！！！！！！

Edit request
759