CODEWITHSUNDEEP
cssreactjs
Deepeshkumar
Deepeshkumar

Reputation: 257

How to make text blink in React?

I am trying to make the text blink in react. I am a complete novice at React. So far I tried to make text red. The code is here,

import React from "react";
import { Component } from "react";

class DisplayMyName extends Component {
    render(){
        const mystyle = {
            color:"red",
        }
        return (
            <div>
                <h1 style={mystyle}>
                    Deepesh
                </h1>
            </div>
        );
    }
}

export default DisplayMyName;

How to make it blink by using CSS attributes the way I am trying in above code?

Upvotes: 3

Views: 5996

Answers (2)

Abdullah Qureshi
Abdullah Qureshi

Reputation: 211

<html>
  <body>
        <style>
        .blink {
            animation: blinker .75s linear infinite;
            color: red;
            font-family: sans-serif;
        }
        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }
    </style>
    <p class="blink"> This is an example of blinking text using CSS. </p>
  </body>
</html>

Upvotes: 1

Abdullah Qureshi
Abdullah Qureshi

Reputation: 211

try out this npm package

https://www.npmjs.com/package/react-blink-text

OR include the following css in a separate file

blink {
-webkit-animation-name: blink; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}

Upvotes: 2

Related Questions