Переписать анимацию из CSS в JS
Приветствую!
Написал анимацию для элементов в одном блоке. Но на компьютерах со слабым процессором, анимация 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 дам исполнителю, если нужно. |
Часовой пояс GMT +3, время: 06:15. |