How to animate a shape on pure CSS?

CSS allows you to create interesting and complex forms known as "shapes". CSS shapes allow you to create geometric shapes such as circles, rectangles, triangles, and ovals without using images or complex graphics programs.

Here we will look at the method of creating a shape using pure CSS, namely I will show you a way to diversify the rather boring static shapes on your site by animating them.

First, we need this CSS code:

.shape-anim {
  right: 0;
  bottom: 0;
}
.shape-anim::before {
  position: absolute;
  content: "";
  width: 300px;
  height: 300px;
  background: linear-gradient(#ec9f05, #ff4e00);
  border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
  will-change: border-radius, transform, opacity;
  animation: sliderShape 5s linear infinite;
  display: block;
  z-index: -1;
  -webkit-animation: sliderShape 5s linear infinite;
}
@keyframes sliderShape{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

Next, we insert the following HTML code directly in the place where the shape is displayed:

<div class="shape-anim"></div>

See what you and I will get as a result here 😉

As you can see, CSS is a fairly powerful language that allows you to create shapes without too much effort. It allows you to control the appearance of elements and improves the user experience. Using CSS, you can create attractive and functional web pages, which will help you attract more visitors and increase the success of your web project.