How can I add text animation using Cascading Style Sheets (CSS)?-CodePudding

I want that my text blinks at the rate of 2 times per second.

I tried but failed to get animated text!

CodePudding user response：

A necessary disclaimer: a flashing text/graphic is not a good idea especially for people suffering from photo-epileptic seizures, people with vestibular disorders, or people with cognitive disabilities.

If you still want to blink the text you can use a simple animation that changes the opacity of an element but only for users that didn't choose any preference about reduced motion, e.g.

@media (prefers-reduced-motion: no-preference) {
  :where(.blink) {
    animation: .5s blink 0s linear infinite;
  }
}

@keyframes blink {
  0, 100% { opacity: 1 }
  50% { opacity: 0; }
}

<p >Blinking text</p>

if feasible, for accessibility reasons I'd suggest to set at least a finite and small animation-iteration-count, so that the text stops flashing after a short time.

CodePudding user response：

<p>Blinking Text</p>


p {
  animation:  0.5s blink linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}