Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

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

タイプライター風

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

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

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;
    }
  }
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX