おまじないの綴り方

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>

参考記事