Як анімувати Shape на чистому CSS?

Покажу вам дуже цікавий спосіб урізноманітнити досить нудні нерухомі шейпи на вашому сайті, анімувавши їх.

Ось, що в нас вийде в результаті:

А ось і сам код 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>

Звичайно, цей варіант - лише один із прикладів використання. Але ви можете використовувати цю анімацію як вам завгодно.