Translate this page

How to Make a Text Blink in CSS

How to Animate or Blink a Text in CSS

Blinking texts can capture user attention easily so you can use it for texts that needs more attention

To make a text blink in CSS, use the code below, you can customize it to change blink rate easily. First thing we need to do is give a class name to the text you want make blink then add that class in css with styling details. If you run a WordPress website, you can easily add this code in additional css

Here is the full CSS code to make a text blink

.blinker {
  animation: blinker 5s linear infinite;
}

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

Blinker is the class name

Result :

This is a blinking text

This is the html of above text

<h3 class="blinker"><span style="color: #ff0000;">This is a blinking text</span></h3>

 

 

Related Posts

black screen with code

HTML Redirect to Other Web Page Automatically

How to redirect to another web page with html code Redirecting a page to another page is simple, you can use the below code to do that,…

black screen with code

PHP Array to JavaScript Array

How to convert PHP array to JavaScript array The code below can convert your php array to JavaScript array

silver imac displaying collage photos

Fix PHP Unable to find the wrapper “https” – did you forget to enable it when you configured PHP?

Here is how to fix Unable to find the wrapper “https” problem in PHP In php development, you will encounter this error when trying to access an…

6 Web Design Secrets Every Business Owner Should Know

Photo Credit: Tranmautritam via Pexels 6 Web Design Secrets Every Business Owner Should Know According to industry experts, small businesses need to have a website to attract…

PHP: Get Visitors IP and Location and Save to TXT File

How to get visitors IP address and Location and save them to Text file in php This simple php code can be used to save visitors data…

Show Alert when Visitor Leaving a Web Page

Here is how to show an alert message when a visitor leaving a web page With this code, we can show a message or dialogue of your…

Leave a Reply

Your email address will not be published. Required fields are marked *