Boxes to box Animation HTML and CSS

Boxes to box loading animation. using html and CSS

CSS Properties

Following are the CSS properties used:

1. 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.
2. 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.
3. 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.
4. Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
5. 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.
6. Color: The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.
7. Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

Boxes to box Animation Code Block

Here is the code for implementing the Boxes to box Animation.

.boxes-to-box {
        width: 80px;
        height: 80px;
        margin-left: 100px;
        color: orange;
        background: linear-gradient(currentColor 0 0),
          linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
          linear-gradient(currentColor 0 0);
        background-size: 41px 41px;
        background-repeat: no-repeat;
        
      }

Yay! We have created the static Boxes to box Animation.

Here is the output:

Boxes to box CSS Animation

boxes 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  boxes {
        0% {
          background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        }
        33% {
          background-position: 0 0, 100% 0, 100% 100%, 0 100%;
          width: 120px;
          height: 120px;
        }
        66% {
          background-position: 100% 0, 100% 100%, 0 100%, 0 0;
          width: 120px;
          height: 120px;
        }
        100% {
          background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        }
      }

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

 .boxes-to-box {
        width: 80px;
        height: 80px;
        margin-left: 100px;
        color: orange;
        background: linear-gradient(currentColor 0 0),
          linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
          linear-gradient(currentColor 0 0);
        background-size: 41px 41px;
        background-repeat: no-repeat;
        animation: boxes 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
      }
      @keyframes boxes {
        0% {
          background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        }
        33% {
          background-position: 0 0, 100% 0, 100% 100%, 0 100%;
          width: 120px;
          height: 120px;
        }
        66% {
          background-position: 100% 0, 100% 100%, 0 100%, 0 0;
          width: 120px;
          height: 120px;
        }
        100% {
          background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        }
      }

Following is the output for Boxes to box Animation animation.

Boxes to box Video Tutorial

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

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>
      .boxes-to-box {
        width: 80px;
        height: 80px;
        margin-left: 100px;
        color: orange;
        background: linear-gradient(currentColor 0 0),
          linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
          linear-gradient(currentColor 0 0);
        background-size: 41px 41px;
        background-repeat: no-repeat;
        animation: boxes 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
      }
      @keyframes boxes {
        0% {
          background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        }
        33% {
          background-position: 0 0, 100% 0, 100% 100%, 0 100%;
          width: 120px;
          height: 120px;
        }
        66% {
          background-position: 100% 0, 100% 100%, 0 100%, 0 0;
          width: 120px;
          height: 120px;
        }
        100% {
          background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Boxes to Box Animation</h1>
    <div class="boxes-to-box"></div>
  </body>
</html>

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