Как анимировать Shape на чистом CSS?

Как анимировать Shape на чистом CSS?

Покажу вам очень интересный способ разнообразить довольно скучные неподвижные шейпы на вашем сайте анимировав их.

Вот, что у нас получиться в итоге:

 

boy
 
 

А вот и сам код CSS, который вам понадобиться:

.shape-anim {
	position: absolute;
	right: 0;
	bottom: 0;
}
.shape-anim::before {
	position: absolute;
	content: "";
	width: 530px;
	height: 530px;
	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);
  }
}

 

Далее, непосредственно в нужном вам месте вывода шейпа вставляем вот такой код HTML:

<div class="shape-anim">&nbsp;</div>

 

Конечно, данный вариант - лишь один из примеров использования. Но вы можете использовать эту анимацию как вам угодно.