Connect with us!

Dancing Triangle Animation HTML and CSS tutorial for beginners

Salow
August 11, 2022
CSS, Animation

Create a dancing triangle animation using html and CSS tutorial with full code.

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.

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.

Clip-path: The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

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

Margin: The margin CSS shorthand property sets the margin area on all four sides of an element.

Dancing Triangle Code Block

Here is the code for implementing the Dancing Triangle Animation.

.dancing-triangle {
        margin: 40px;
        width: 100px;
        height: 100px;
        background: #f03355;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        
      }

Yay! We have created the static Dancing Triangle Animation.

Here is the output:

Dancing triangle

Dancing Triangle CSS Animation

dancing 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  dancing {
        25% {
          clip-path: polygon(0 0, 100% 0, 0 100%);
        }
        50% {
          clip-path: polygon(0 0, 100% 100%, 0 100%);
        }
        75% {
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }
        100% {
          clip-path: polygon(100% 0, 100% 100%, 0 0);
        }
      }

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

 .dancing-triangle {
        margin: 40px;
        width: 100px;
        height: 100px;
        background: #f03355;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        animation: dancing 2s infinite cubic-bezier(0.3, 1, 0, 1);
      }
      @keyframes dancing {
        25% {
          clip-path: polygon(0 0, 100% 0, 0 100%);
        }
        50% {
          clip-path: polygon(0 0, 100% 100%, 0 100%);
        }
        75% {
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }
        100% {
          clip-path: polygon(100% 0, 100% 100%, 0 0);
        }
      }

Following is the output for Dancing Triangle Animation animation.

Dancing triangle animation

Dancing Triangle Video Tutorial

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

Dancing Triangle Animation HTML and CSS tutorial for beginners 2022 #shorts #coding

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>
      .dancing-triangle {
        margin: 40px;
        width: 100px;
        height: 100px;
        background: #f03355;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        animation: dancing 2s infinite cubic-bezier(0.3, 1, 0, 1);
      }
      @keyframes dancing {
        25% {
          clip-path: polygon(0 0, 100% 0, 0 100%);
        }
        50% {
          clip-path: polygon(0 0, 100% 100%, 0 100%);
        }
        75% {
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }
        100% {
          clip-path: polygon(100% 0, 100% 100%, 0 0);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Dancing Triangle Animation</h1>
    <div class="dancing-triangle"></div>
  </body>
</html>

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