読者です 読者をやめる 読者になる 読者になる

おまじないの綴り方

spelling of a logical spell

CSSのanimationで文字を点滅させるサンプル

目標

f:id:miyatsuki_yatsuki:20170318195726g:plain

コード

<html>
  <style>
  .blink {
    animation-name: flash; <!--CSS側で定義したアニメーションの名前-->
    animation-duration: 1s; <!--アニメーションの長さ-->
    animation-iteration-count: infinite; <!--アニメーションを何回実行するか, infiniteだと無限ループ-->
    animation-direction: alternate; <!--alternateにすると、行って帰ってという風にアニメーションを実行する-->
    animation-play-state: running; <!--アニメーションを実行中の状態にする-->
  }

 <!--全体の何%進んだところで要素をどうするかの指定。今回は不透明度を0にする-->
  @keyframes flash {
    50%{
        opacity: 0;
    }
  }
  </style>

  <body>
    <span class="blink">hoge</span>
  </body>
</html>

参考記事

qiita.com

qiita.com