ブログデザイン備忘録～モーフィング

f:id:ATATAT:20210614203444p:plain:w600

今回はCSSを用いた文字の変形/モーフィングの方法について紹介したい。

元のコードは以下に掲載されていて文字が7変化するモーフィングになっているが、今回は簡単のため2つの文字のモーフィングについて取り上げる。

CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック | コリス

表示する文字はhtmkで親クラスmorphingの下にwordという2つの子クラスを設定する。

<div class="morphing">
  <div class="word">Word</div>
  <div class="word">morphing</div>
</div>

cssのアニメーションでは animation: word 4s infinite ease-in-out;とすることでwordという名のアニメションが4秒間、無限回で開始と終了をゆっくりと動かすという設定になる。 ease-in-outを利用することで、文字が滑らかに切り替わる効果を与える。

.morphing {
  position: relative;
  font-size: 60px;
  background-color: black;
  color: yellow;
  min-height: 100vh;
  filter: contrast(25) blur(1px);
}
.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: word 4s infinite ease-in-out;
}

次のポイントとしてはanimation-delayを用いてそれぞれの文字のアニメーション開始タイミングをずらすことで交互に文字が表示されるようになる。最後に@keyframesで文字の表示/非表示をfilter,opacityを用いて指定する。

.word:nth-child(1) {
  animation-delay: -4s;
}
.word:nth-child(2) {
  animation-delay: -3s;
}

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