Help us understand the problem. What is going on with this article?

CSSで点滅アニメーション

More than 3 years have passed since last update.

マウスが乗ったら特定の場所を点滅させるアニメーション。

opacityを使って点滅

flash1.gif

<p>テキストを<span class="flash1">点滅</span>させます</p>

p:hover > .flash1{
  animation: Flash1 1s infinite;
}

/* アニメーション */
@keyframes Flash1{
  50%{
    opacity: 0;
  }
}

text-shadowを使って点滅

flash2.gif

<p><span class="flash2">重要な部分</span>を強調させる時に使えます。</p>

p:hover > .flash2{
  animation: Flash2 2s infinite;
}

/* アニメーション */
@keyframes Flash2{
  50%{
    text-shadow: 1px 1px 0 red;
  }
}

box-shadowを使って点滅

flash3.gif

<p class="flash3">text-decoration: blink;は非推奨</p>

.flash3{
  display: inline-block;
  white-space: nowrap;
}

.flash3:hover {
  animation: Flash3 2s infinite;
}

/* アニメーション */
@keyframes Flash3{
  50%{
    text-shadow: 1px 1px 0 red;
    box-shadow: 0 1px 15px 0 blue;
  }
}

画像も点滅

img_flash.gif

<p><img src="sample.png" width="200" height="200"></p>

p:hover > img{
  animation: Flash4 2s infinite;
}

/* アニメーション */
@keyframes Flash4{
  50%{
    box-shadow: 0 1px 15px 1px blue;
  }
}


Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away