Connect with us!

Blinking Dots Animation CSS and HTML coding tutorial

Salow
September 9, 2022
Animation, CSS

Creating blinking dots with CSS animation using HTML and CSS tutorial.

CSS Properties

Following are the CSS properties used:

Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area

Blinking Dots Code Block

Here is the code for implementing the Blinking Dots Animation.

.blnking-dots {
        margin-top: 50px;
        margin-left: 100px;
        width: 120px;
        aspect-ratio: 4;
        background: radial-gradient(circle closest-side, #f72585 90%, #0000) 0 /
          calc(100% / 3) 100% no-repeat;
      }

Yay! We have created the static Blinking Dots Animation.

Here is the output:

Blinking dots

Blinking Dots CSS Animation

blink animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes blink {
        to {
          background-position: 150%;
        }
      }

The following way is to declare the CSS Class inside the class block.

@keyframes blink {
        to {
          background-position: 150%;
        }
      }
      .blnking-dots {
        margin-top: 50px;
        margin-left: 100px;
        width: 120px;
        aspect-ratio: 4;
        animation: blink 1s steps(3) infinite;
        background: radial-gradient(circle closest-side, #f72585 90%, #0000) 0 /
          calc(100% / 3) 100% no-repeat;
      }

Following is the output for Blinking Dots Animation animation.

Blinking Dots Animation

Blinking Dots Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Blinking dots animation YouTube

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      @keyframes blink {
        to {
          background-position: 150%;
        }
      }
      .blnking-dots {
        margin-top: 50px;
        margin-left: 100px;
        width: 120px;
        aspect-ratio: 4;
        animation: blink 1s steps(3) infinite;
        background: radial-gradient(circle closest-side, #f72585 90%, #0000) 0 /
          calc(100% / 3) 100% no-repeat;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Blinking Dots Animation</h1>
    <div class="blnking-dots"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Blinking Dots Animation Animation using CSS and HTML. See you in next tutorial!