CSS animation

Мигающий текст – blinky

by akogch

HTML

<div class="blinky--first">First blinky</div>
<div class="blinky--second">Second blinky</div>
<div class="blinky--third">Third blinky</div>

CSS

@keyframes blinky-outside-mq {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.blinky--first {
  animation: blinky-outside-mq 2s infinite;
  color: #f00;
}

@media screen {
  @keyframes blinky-inside-mq {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .blinky--second {
    animation: blinky-inside-mq 2s infinite;
    color: #0f0;
  }

  .blinky--third {
    animation: blinky-outside-mq 2s infinite;
    color: #00f;
  }
}