Как динамически менять длительность анимации?

Question

[Gera11]

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

Answer 1

[0xD34F]

function setAnimation(el) {
  $(el).css('animation', `shadow-pulse ${1 + Math.random() * 3}s`);
}

$('.mr-2').on('animationend', function() {
  $(this).css('animation', '');
  setTimeout(setAnimation, 0, this);
}).get().forEach(setAnimation);

Comments

[Gera11]

никак, codepen

[0xD34F]

Gera11, ну ты и дегенерат. Подключи jquery.

[Gera11]

0xD34F, Всё, сам додумался)

[0xD34F]

Gera11, о да, это походу единственное, что ты можешь сделать сам - через 10 минут созерцания jquery-кода догадаться jquery подключить. Гигант мысли, блин.

[Gera11]

0xD34F, А как быть если у меня несколько анимаций? а не одна?
несколько shadow-pulse ?
shadow-pulse
shadow-pulse2
shadow-pulse3

[0xD34F]

Gera11, думай.

[Gera11]

0xD34F, ты чего такой вспыльчивый? подскажи пожалуйста!

[0xD34F]

Gera11, тебе это не надо.

[Gera11]

0xD34F,

function setAnimation(el) {
  $(el).css('animation', `shadow-pulse ${1 + Math.random() * 3}s`);
}
  $(el).css('animation', `shadow-pulse2 ${1 + Math.random() * 3}s`);
}

$('.mr-2').on('animationend', function() {
  $(this).css('animation', '');
  setTimeout(setAnimation, 0, this);
}).get().forEach(setAnimation);

пробовал так, Но не хочет

[0xD34F]

Gera11, ну, пробуй ещё.

[Gera11]

0xD34F, мда, нафига тогда вообще ответ писать если подсказать не можешь? Строят из себя непойми кого..
Скажи просто что не умеешь.

[0xD34F]

Gera11, ну, я бы написал, если бы тебе это было надо. Но тебе не надо.

[Gera11]

0xD34F, Ты вообще нормальный? Если бы мне это было не надо я бы и вопрос не задавал.
Просто не пойму почему, люди которые тут разбираются в коде и вообще в своем деле. Строят из себя ЧСВшных додиков. И начинают понты колотить. Ну так раз человек задает вопрос и ты на него ответил, ну напиши тебе ведь это не сложно, и сам респект получишь и нервы не придется трепать да и с человеком в нормальных отношениях останешься.. разве не так ?

[0xD34F]

Gera11,

Если бы мне это было не надо я бы и вопрос не задавал.

"Не надо" - это не про ответ на вопрос вообще. Я про свои ответы. Ну, практика показывает, что тебе моя помощь не нужна - сколько ты моих ответов проигнорировал в прошлом? Я давно уже со счёта сбился.

[Gera11]

0xD34F, и так тоже не фурычит.

function setAnimation(el) {
  $(el)
    .css('animation', `shadow-pulse ${1 + Math.random() * 3}s`)
    .css('animation', `shadow-pulse2 ${1 + Math.random() * 3}s`)
  ;
}
$('.mra').on('animationend', function() {
  $(this).css('animation', '');
  setTimeout(setAnimation, 0, this);
}).get().forEach(setAnimation);

Короче ладно, забей. В жизни с таким отношением к людям тебе будет сложно. Бог тебе судья..

Answer 2

[EastJesus]

Выбираем все элементы, создаем массивы с заданными значениями, по интервалу выбираем случайные значения и изменяем анимацию

const animations = ["shadow-pulse-big", "shadow2-pulse", "shadow2-pulse-big"];
const intense = ["1.5", "6", "0.5"]


$(elements).each((el) => {
    let random_animation = Math.floor(Math.random() * animations.length);
    let random_intense = Math.floor(Math.random() * intense.length);

    setInterval(() => {

        let old_random_animation = random_animation
        let old_random_intense = random_intense

        $(el).css({ animation: `${old_random_animation} ${old_random_intense}s infinite` });

        random_animation = Math.floor(Math.random() * animations.length);
        random_intense = Math.floor(Math.random() * intense.length);
    }, old_random_intense * 1000)
})