1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSのanimationで点滅させる(よくない実装)

Last updated at Posted at 2017-01-25

css3のanimationで
0% 100% にopacityを0,1と交互に指定して、
animation-durationを調整すれば大丈夫だと思います。

.blink{ //点滅させたい要素に指定
  animation: blink 1s infinite;
}
@keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

50% {opacity:1} など途中にopacityを指定しておくと点滅の周期をズラすことも出来そうです。

ただ、嫌がらせみたいな実装をscssなら簡単に出来ると思ったのでメモ
#scss

.blink{ //点滅させたい要素に指定
  animation: blink 1s infinite;
}
@keyframes blink {
  @for $i from 0 through 100{
    @if $i % 2 == 0{ //偶数の場合
      #{$i}% {opacity:0}
    } @else { //奇数の場合
      #{$i}% {opacity:1}
    }
  }
}

1%ずつopacityが0,1で入れ替わります。
確実に意味がなく動作が重くなる可能性が高いのでやめましょう

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?