Как сделать данную анимация на javascript'е?

Question

[Арсений Соколовский]

Есть анимация :

@keyframes pulse {
  0% {
    transform: scale(1.25);
    opacity: 1;
  }

  25% {
    transform: scale(1);
    opacity: 1;
  }

  30% {
    transform: scale(1.05);
    opacity: 1;
  }

  to {
    transform: scale(.85);
    opacity: 0;
  }
}

Как мне сделать точно такую же анимацию на javascript ?

Comments

[its2easyy]

а что у вас не получилось?

[Арсений Соколовский]

its2easyy, нет(

Answer 1

[Алексей Назаренко]

При помощи нативного метода animate, как-то так:

element.animate(
    [
        { transform: 'scale(1.25)', opacity: 1},
        { transform: 'scale(1)', opacity: 1, offset: 0.25 },
        { transform: 'scale(1.05)', opacity: 1, offset: 0.3}, 
        { transform: 'scale(0.85)', opacity: 0} 
    ],
    2000
);

Однако стоит обратить внимание, что это экспериментальное API и работает не во всех браузерах. Если нужна глубокая поддержка, то как вариант использовать jQuery animate

Comments

[Арсений Соколовский]

Спасибо огроменное!!!