Eating Triangle to Rectangle Animation

Eating Triangle to Rectangle with CSS animation using HTML and CSS tutorial

CSS Properties

Following are the CSS properties used:

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

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.

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.

Eating Triangle Code Block

Here is the code for implementing the Eating Triangle to Rectangle Animation.

.self-eating {
        margin-top: 50px;
        margin-left: 80px;
        width: 80px;
        height: 80px;
        display: grid;

      }
      .self-eating:before,
      .self-eating:after {
        content: "";
        grid-area: 1/1;
        background: #f03355;
        
      }
      .self-eating:after {
        --s: -1;
        animation-direction: reverse;
      }

Yay! We have created the static Eating Triangle to Rectangle Animation.

Here is the output:

Eating Triangle CSS Animation

eating-0 , eating-1 , eating-2 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  eating-0 {
        0%,
        9%,
        91%,
        100% {
          background: #f03355;
        }
        10%,
        90% {
          background: #0000;
        }
      }
      @keyframes eating-1 {
        0%,
        33% {
          clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
        }
        66%,
        100% {
          clip-path: polygon(50% 0, 50% 100%, 50% 0, 100% 100%, 0 100%);
        }
      }
      @keyframes eating-2 {
        0%,
        10%,
        90%,
        100% {
          transform: scale(var(--s, 1)) translateY(0);
        }
        33%,
        66% {
          transform: scale(var(--s, 1)) translateY(50%);
        }
      }
      .self-eating {
        margin-top: 50px;
        margin-left: 80px;
        width: 80px;
        height: 80px;
        display: grid;
        animation: eating-0 1.5s infinite linear;
      }
      .self-eating:before,
      .self-eating:after {
        content: "";
        grid-area: 1/1;
        background: #f03355;
        animation: eating-1 1.5s infinite linear, eating-2 1.5s infinite linear;
      }
      .self-eating:after {
        --s: -1;
        animation-direction: reverse;
      }

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

 @keyframes eating-0 {
        0%,
        9%,
        91%,
        100% {
          background: #f03355;
        }
        10%,
        90% {
          background: #0000;
        }
      }
      @keyframes eating-1 {
        0%,
        33% {
          clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
        }
        66%,
        100% {
          clip-path: polygon(50% 0, 50% 100%, 50% 0, 100% 100%, 0 100%);
        }
      }
      @keyframes eating-2 {
        0%,
        10%,
        90%,
        100% {
          transform: scale(var(--s, 1)) translateY(0);
        }
        33%,
        66% {
          transform: scale(var(--s, 1)) translateY(50%);
        }
      }
      .self-eating {
        margin-top: 50px;
        margin-left: 80px;
        width: 80px;
        height: 80px;
        display: grid;
        animation: eating-0 1.5s infinite linear;
      }
      .self-eating:before,
      .self-eating:after {
        content: "";
        grid-area: 1/1;
        background: #f03355;
        animation: eating-1 1.5s infinite linear, eating-2 1.5s infinite linear;
      }
      .self-eating:after {
        --s: -1;
        animation-direction: reverse;
      }

Following is the output for Eating Triangle to Rectangle Animation animation.

Eating Triangle 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>
      @keyframes eating-0 {
        0%,
        9%,
        91%,
        100% {
          background: #f03355;
        }
        10%,
        90% {
          background: #0000;
        }
      }
      @keyframes eating-1 {
        0%,
        33% {
          clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
        }
        66%,
        100% {
          clip-path: polygon(50% 0, 50% 100%, 50% 0, 100% 100%, 0 100%);
        }
      }
      @keyframes eating-2 {
        0%,
        10%,
        90%,
        100% {
          transform: scale(var(--s, 1)) translateY(0);
        }
        33%,
        66% {
          transform: scale(var(--s, 1)) translateY(50%);
        }
      }
      .self-eating {
        margin-top: 50px;
        margin-left: 80px;
        width: 80px;
        height: 80px;
        display: grid;
        animation: eating-0 1.5s infinite linear;
      }
      .self-eating:before,
      .self-eating:after {
        content: "";
        grid-area: 1/1;
        background: #f03355;
        animation: eating-1 1.5s infinite linear, eating-2 1.5s infinite linear;
      }
      .self-eating:after {
        --s: -1;
        animation-direction: reverse;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Eating Triangle to Rectangle</h1>
    <div class="self-eating"></div>
  </body>
</html>

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