CSSだけでテキストのモーフィングアニメーション

Result

JavaScriptやSVGなども使わず、純粋なCSSだけで上のようなモーフィング(Wikipedia)アニメーションを実装できる、というもの

種を明かせばシンプルな方法でしたが思いつかなかったので備忘録的にメモ。

css

.morphing {
  position: relative;
  font-size: 90px;
  background-color: #000;
  color: #fff;
  min-height: 50vh;
  filter: contrast(25) blur(1px);
}
.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: word 16s infinite ease-in-out;
}
.word:nth-child(1) {
 animation-delay: -16s;
}
.word:nth-child(2) {
animation-delay: -14s;
}
.word:nth-child(3) {
animation-delay: -12s;
}
.word:nth-child(4) {
animation-delay: -10s;
}
.word:nth-child(5) {
animation-delay: -8s;
}
.word:nth-child(6) {
 animation-delay: -6s;
}
.word:nth-child(7) {
animation-delay: -4s;
}

@keyframes word {
  0%, 5%, 100% {
    filter: blur(0px);
    opacity: 1;
  }
  20%, 80% {
    filter: blur(1em);
    opacity: 0;
  }
}

テキストの変化は変化させたい文字を同じ場所に重ねてそれぞれanimation-delayさせる。
モーフィングですが、これはfilterと@keyframesで実現しています。次々変化してるように見えますが、実際は16秒かけて1周、の繰り返しです。filter: contrastとblurで溶ける様を演出。

フォント次第では変化する前に一度消えてしまうので調整が必要かもです。

html

<div class="morphing">
  <div class="word">Word</div>
  <div class="word">morphing</div>
  <div class="word">with</div>
  <div class="word">pure</div>
  <div class="word">CSS</div>
  <div class="word">is</div>
  <div class="word">great!</div>
</div>

文字数を増やす場合はCSSも調整してください

via

CSS morphing