Connect with us!

Dot in dot out Animation using HTML and CSS

Salow
September 9, 2022
Animation, CSS

Dot in out is loading animation, using HTML and CSS

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.

Aspect-ratio: The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Background-repeat: The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Background-size: The background-size CSS property sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Margin-left: The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

Dot in dot out Code Block

Here is the code for implementing the Dot in dot out Animation.

.dots-in-out {
        width: 120px;
        margin-left: 160px;
        aspect-ratio: 4;
        background: radial-gradient(
            circle closest-side at left 12px top 50%,
            #f72585 90%,
            #0000
          ),
          radial-gradient(circle closest-side, #f72585 90%, #0000),
          radial-gradient(
            circle closest-side at right 12px top 50%,
            #f72585 90%,
            #0000
          );
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
      }

Yay! We have created the static Dot in dot out Animation.

Here is the output:

Dot in out

Dot in dot out CSS Animation

out-ani 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  out-ani {
        to {
          width: 50px;
          aspect-ratio: 1;
        }
      }

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

 .dots-in-out {
        width: 120px;
        margin-left: 160px;
        aspect-ratio: 4;
        background: radial-gradient(
            circle closest-side at left 12px top 50%,
            #f72585 90%,
            #0000
          ),
          radial-gradient(circle closest-side, #f72585 90%, #0000),
          radial-gradient(
            circle closest-side at right 12px top 50%,
            #f72585 90%,
            #0000
          );
        background-size: 100% 100%;
        background-repeat: no-repeat;
        animation: out-ani 1s infinite alternate;
      }
      @keyframes out-ani {
        to {
          width: 50px;
          aspect-ratio: 1;
        }
      }

Following is the output for Dot in dot out Animation animation.

Dot in dot out Animation

Dot in dot out Video Tutorial

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

Dot in dot out 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>
      .dots-in-out {
        width: 120px;
        margin-left: 160px;
        aspect-ratio: 4;
        background: radial-gradient(
            circle closest-side at left 12px top 50%,
            #f72585 90%,
            #0000
          ),
          radial-gradient(circle closest-side, #f72585 90%, #0000),
          radial-gradient(
            circle closest-side at right 12px top 50%,
            #f72585 90%,
            #0000
          );
        background-size: 100% 100%;
        background-repeat: no-repeat;
        animation: out-ani 1s infinite alternate;
      }
      @keyframes out-ani {
        to {
          width: 50px;
          aspect-ratio: 1;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Dots in Out Animation</h1>
    <div class="dots-in-out"></div>
  </body>
</html>

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