[CSS] タイピングのアニメーションの作り方

2023年1月30日2023年7月17日

CSSだけで、見出しなどをタイピングした様に一文字づつ表示させ、最後にカーソルを点滅させるアニメーションです。コピペで出来きます。ぜひやってみて下さい。

コードをSCSSで書きました。まだSCSSをお試し出ない方、便利ですのでCSSから脱却してみませんか？

導入方法

Visual Studio Code (VSC)とSASSの環境とコンパイル SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単！無料ですし、初心者でも怖がらずにインストールできるのでお勧めです！Atomよりも軽い様にも思います…

INDEX

基本形

基本の部分です。擬似クラスでカーソル部分を付けています。

h1{  
  font-size: 1.8rem;
  overflow: hidden;
 
&::after {
  position: relative;
  top: 0.2rem;
  left: 0.3rem;
  display: inline-block;
  height: 1.8rem;
  background-color: #4697CC;
  margin-left: .6rem;
  width: 2px;
  content: "";
}
}

アニメーション

擬似クラスの部分を透明度を設定し、チカチカする感じにしています。

h1{  
    animation: typing 4s steps(23);
    white-space: nowrap;
    overflow: hidden;
  &::after {
    animation: flash 1s ease infinite;
  }
  }
  @keyframes typing {
    from {
      width: 0
    }
    to { width: 100% }
  }
  @keyframes flash {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    } 
    100% {
      opacity: 1;
    }
  }

よかったらシェアお願いします