JSFiddle - React, Tailwind, and code Playground

by ludovicoiovino

HTML

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS - Blinking text </title>
</head>
<body>
    <h1>
        CSS - blink the text 
    </h1>
    <p id = "blink_text">
        Now you can see the blinking/flashing text.
    </p>
</body>
</html>

CSS

body{
  color: black;}
  
#blink_text{	
  animation-name:blink;
  width:280px;
  animation-duration:2s;
  animation-timing-function:ease-in;
  animation-iteration-count:Infinite;
  }

@keyframes blink{
  0%{color:red;}
  50%{color:white;}
  100%{color:red;}