CSSで要素の四隅をうねらせる -ロゴ風編

CSSで要素の四隅をうねらせる -見出し編に続きロゴ風編です。

ロゴ編ではなくロゴ風編という妙な書き方になっていますが、「正方形だからロゴっぽい場所で使えそう」という代物でして。

ロゴの周囲に使えばそれっぽくなるかもしれません。

実現したいこと

実現したいことは以下のとおり。

• CSSのみでアニメーション
• ちょっと変わったアニメーション

見出し編と同様ですが、正方形ならもう少しきれいな感じでウネウネできるだろうと試してみました。

たまにロゴで見かけるかもしれないアニメーション

<div class="wavy-box">
  <p>LOGO</p>
</div>

/*テクスチャの記述は省いています*/
.wavy-box {
  position: relative;
  z-index: 0;
  display: table;
  width: 102px;
  height: 102px;
  margin: 40px auto;
  border-radius: 50%;
}
.wavy-box p {
  font-size: 20px;
  line-height: 1;
  display: table-cell;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  color: #efede1;
}
.wavy-box::before, .wavy-box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  border-radius: 50%;
}
.wavy-box::before {
  z-index: -1;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  -webkit-animation: wb 6s infinite linear;
          animation: wb 6s infinite linear;
  background-color: #59dbcb;
}
.wavy-box::after {
  z-index: -2;
  width: 102px;
  height: 102px;
  margin-top: -51px;
  margin-left: -51px;
  -webkit-animation: wb 7s infinite linear reverse;
          animation: wb 7s infinite linear reverse;
  background-color: #e2d544;
}
@-webkit-keyframes wb {
  0% {
    -webkit-transform: rotate(0deg);
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
  20% {
    -webkit-transform: rotate(72deg);
    border-radius: 70% 58% 58% 58%/70% 58% 58% 58%;
  }
  40% {
    -webkit-transform: rotate(144deg);
    border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
  }
  60% {
    -webkit-transform: rotate(216deg);
    border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
  }
  80% {
    -webkit-transform: rotate(288deg);
    border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
}
@keyframes wb {
  0% {
    transform: rotate(0deg);
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
  20% {
    transform: rotate(72deg);
    border-radius: 70% 58% 58% 58%/70% 58% 58% 58%;
  }
  40% {
    transform: rotate(144deg);
    border-radius: 58% 60% 58% 58%/58% 60% 58% 58%;
  }
  60% {
    transform: rotate(216deg);
    border-radius: 58% 58% 65% 58%/58% 58% 65% 58%;
  }
  80% {
    transform: rotate(288deg);
    border-radius: 58% 58% 58% 70%/58% 58% 58% 70%;
  }
  100% {
    transform: rotate(360deg);
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
  }
}

思ったよりも数値の設定が難しかったのですが、小振りながらある程度は意図した動きにできました。

下の黄色の円は、2pxだけ大きくしてはみ出やすいようにし、reverseで逆再生にすることで、keyframeの指定を増やさず違った動きに見えるようにしました。

なお、正円をきれいにうねうねさせるには、対角線上か又は１つの角だけ丸みを変化させる方が、制御しやすく良い感じになりそうです。

アニメーションは一カ所が切り離されて動いて終わりではないので、人体の動きのように連動や伝播する力の流れを意識すると良いのだと思います。

細かく設定を試していると簡単に日が暮れますので、やりすぎ注意ですが。

例えば、border-widthの変化も追加すればもっと大きな振幅も可能です。box-shadowと併せてdottedのラインを入れれば派手にもなります。

組み合わせ次第で派手さは追加できるので、まだまだ違うバージョンを作れるはずです。

結び

webサイトにおいて、装飾に用いられたアニメーションには何らかの役割があると思います。

今回のロゴ用のアニメーションは、CTAボタン用に求められる「目を惹くためのアニメーション」ではなく、「雰囲気づくりのためのアニメーション」に属するものと考えて作成しました。

ロゴはある程度目立つ方が良いのですが、毎回アクセスの度に強く主張されても邪魔に感じるので、ユーザーに期待する視線移動の順番を考えると、少なくとも本文見出しよりは控えめぐらいがよいのかもしれません。

よくある話ですが、「作った方は満足感が高くとも、ユーザーには邪魔に思われる」という問題はここにも当てはまるはずですから。

アニメーションの導入を考える場合は、サイト内での位置や役割を十分に考慮して検討を行うのが無難でしょう。

なお、冒頭でも書きましたが見出し編は以下からでもどうぞ。

• CSSで要素の四隅をうねらせる -見出し編