はじめに

これは第2のドワンゴ Advent Calendar 24日目の記事として書かれた記事です。

自己紹介

こんにちわ。元ドワンゴのデザイナー id:uniq です。

ドワンゴというと何故か ParrotアニGIF を思い出しました。なので、なんとなくCSSでチカチカクルクルするやつだけでもやってみます。

やってみる

まずCSSで丸い表現

HTMLてきとうに用意。

<div class="layout">
  <div class="parrot">
  </div>
</div>

CSSもてきとうに。 border-radius で円の直径を指定するのだけど、全体の幅 width と高さ height を指定しているのであれば、「%」つかうと楽。

.layout {
  padding: 20px 50px;
}
.parrot {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffd68c;
}

これで黄色い丸ができてるはず。まだ動かない。

ぐるぐるさせる

party っていう名前であにめーしょん作る。
-webkit-transform-origin でぐるぐる廻る中心を設定する。

@-webkit-keyframes party {
　　0% {-webkit-transform: rotate(0deg);}
　　100% {background-color: #ffd68c;}
}

.parrot {
  border: 2px solid #373737;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffd68c;
  -webkit-animation: party .5s linear infinite;
  -webkit-transform-origin: 20px 35px;
}

今回はwebkitだけ。。。これで黄色い丸がぐるぐるしてると思う。

色を調べる

色を変化させるために、色を拾ってくる。最新のphotoshopでひらいたら、アニメーションgifのコマがレイヤー毎に別れてた。すべての色をメモしておく。…10回ぐらい変えれば大丈夫っぽいかな。

f:id:uniq:20161224000628p:plain

色を変えてみる

分け方は、0%→10%→…（省略）…→90%→100%　…でいっかな。とりあえず。

0% { background-color: #ffd68c; }
10% { background-color: #8cffff; }
20% { background-color: #8cff8c; }
30% { background-color: #8cb5ff; }
40% { background-color: #d68cff; }
50% { background-color: #ff8cff; }
60% { background-color: #d68cff; }
70% { background-color: #8cb5ff; }
80% { background-color: #8cffff; }
90% { background-color: #8cff8c; }
100% { background-color: #ffd68c; }

↑この子達を、 party に入れてあげる。

@-webkit-keyframes party {
　　　　0% {
    -webkit-transform: rotate(0deg);
    background-color: #ffd68c;
  }
　　　　10% { background-color: #8cffff; }
　　　　20% { background-color: #8cff8c; }
　　　　30% { background-color: #8cb5ff; }
　　　　40% { background-color: #d68cff; }
　　　　50% { background-color: #ff8cff; }
　　　　60% { background-color: #d68cff; }
　　　　70% { background-color: #8cb5ff; }
　　　　80% { background-color: #8cffff; }
　　　　90% { background-color: #8cff8c; }
　　　　100% {
    -webkit-transform: rotate(360deg);
    background-color: #ffd68c;
  }
}

↑こんなかんじになった。

↓結果。

さいごに

めりーくりすます！
ドワンゴ Advent Calendarなのに、エンジニアっぽいことが書けなくてごめんね？　でも気にしてない。
AngularJS にしようか、チームまねじめんとな話題にしようか悩んだ。
来年もよろしくお願いいたします。

Uni-Q blog

うにきゅうぶろぐ

css で ParrotアニGIF みたいなの