Приветствую!
Написал анимацию для элементов в одном блоке.
Но на компьютерах со слабым процессором, анимация CSS загружает процессор на 100%.
Ходят слухи, что анимация на JS не такая прожорливая и меньше нагружает процессор.
Возможно, что анимацию нужно написать на другом языке, а не на JS.
На сайте используется PHP8, jQuery, JS, Bootstrap-5.
Вот код блока с анимацией:
<style>
@keyframes anima1{50% {transform:translateY(-5px) scale(1.05)}0% {transform:translateY(0) scale(1)}}
@keyframes anima2{25% {transform:translateY(-5px) scale(1.1) rotate(-5deg)}75% {transform:translateY(-5px) scale(1.1) rotate(5deg)}0% {transform:translateY(0) scale(1) rotate(0)}}
@keyframes anima3 {25% {transform:translateY(-5px)}75% {transform:translateY(5px)}0% {transform:translateY(0)}}
@keyframes anima4 {50% {margin-top:-5px}0% {margin-top:0}}
.sb-illustration-1 .sb-cirkle-1{animation:anima3 3s ease-in-out 1s infinite;}
.sb-illustration-1 .sb-cirkle-2{animation:anima1 2s ease-in-out 3s infinite;}
.sb-illustration-1 .sb-cirkle-3{animation:anima1 3s ease-in-out infinite;}
.sb-illustration-1 .sb-cirkle-4{animation:anima1 3s ease-in-out 4s infinite;}
.sb-illustration-1 .sb-cirkle-5{animation:anima3 3s ease-in-out 1.5s infinite;}
.sb-illustration-1 .sb-pik-1{animation:anima2 3s ease-in-out 2s infinite;}
.sb-illustration-1 .sb-pik-2{animation:anima2 3s ease-in-out 1s infinite;}
.sb-illustration-1 .sb-pik-3{animation:anima2 3s ease-in-out infinite;}
.sb-illustration-1 .sb-pik-4{animation:anima2 4s ease-in-out 3s infinite;}
</style>
<div class="col-lg-6">
<div class="sb-illustration-1">
<img class="sb-girl" src="/hands.webp">
<div class="sb-cirkle-1"></div>
<div class="sb-cirkle-2"></div>
<div class="sb-cirkle-3"></div>
<div class="sb-cirkle-4"></div>
<div class="sb-cirkle-5"></div>
<img class="sb-pik-1" src="/mms-icon.svg">
<img class="sb-pik-2" src="/sms-icon.svg">
<img class="sb-pik-3" src="/whatsapp-icon.svg">
<img class="sb-pik-4" src="/phone-icon.png">
</div>
</div>
Задание:
Переписать анимацию с языка CSS на другой язык, чтобы минимально нагружала процессор и была кроссбраузерная.
Если анимация на JS будет лучший выбор, то значить переписать анимацию на JS.
Предлагаю к оплате 500 руб., но исполнитель сам может предложить свою цену.
Оплата после выполнения задания на банковскую карту банка в РФ или на кошелек Юмани.
Ссылку на страницу HTML дам исполнителю, если нужно.
