Как дать каждому div разную скорость анимации с помощью css-анимации
Пытаясь хотя бы разобраться в этом, я работаю над веб-сайтом для друга, вот одна из страниц ..
http://sarahboulton.co.uk/livingroom.html
Таким образом, при обновлении отображается одно из четырех созвездий букв, которые сдвигают свои созвездия, используя математический случай.
Мы надеялись начать применять небольшие анимации к буквам ... что-нибудь в этом роде ...
.lipbalm {
animation: shake 0.1s;
animation-iteration-count: infinite; }
@keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.5px) }
100% { transform: translate(0px) }
}
Но можно ли эти движения рандомизировать для каждой буквы, все еще небольшие движения .. но с использованием чего-то похожего на ..
$(document).ready(function(){
$('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});
.. каждая буква случайным образом меняет свое движение, может, одна и заканчивается ..
@keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.4px) }
100% { transform: translate(0px) }
}
.. и еще один ..
@keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.1px) }
100% { transform: translate(0px) }
}
и что-то похожее по скорости тоже? Все буквы имеют свой собственный div, может быть проще просмотреть исходный код страницы, чтобы увидеть, что происходит!
Я не понимаю, вы пытаетесь заставить букву двигаться вечно или просто будете в случайных местах каждый раз, когда обновляете страницу?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я думаю, что самый простой способ сделать это - создать случайную анимацию дрожания, которую можно было бы применить ко всем буквам. Затем вы можете случайным образом применить встроенный CSS animation-delay: 100ms или animation-delay: 300ms. Этот стиль можно было применять каждый раз по-разному. Все буквы будут использовать одинаковую анимацию встряхивания, но будут иметь разные интервалы анимации в зависимости от времени задержки.
Это должен быть комментарий, а не ответ, поскольку он предлагает новую идею, а не основную проблему, заданную в OP.
Решение буквально повторно использует всю предыдущую работу OP и просто случайным образом применяет задержку анимации к соответствующим div. Предложенное вами решение бросает всю эту работу и случайным образом генерирует массу новых CSS-анимаций (каждая из которых будет менее производительной). Честно говоря, это своего рода придурок - проголосовать против этого ответа только для того, чтобы ваш ответ был принят.
В комментарии описывается, почему я проголосовал против. Мне не нужны эти супер виртуальные оценки, а голоса - это вежливый способ узнать, согласны ли другие с вашим ответом или нет! Это не конкурс!
Никто не сказал, что это конкурс. Тот факт, что вы чувствуете необходимость указать на это, говорит о многом. Моя забота - скрыть ответ, который может оказаться полезным для других.
Я бы подошел к этой проблеме, создав несколько вариантов вашего класса встряхивания, а затем назначив эти классы случайным образом, когда вы назначаете случайное созвездие.
Так что-то вроде этого:
css
.shake-1{
animation: shake-1 0.3s;
animation-iteration-count: infinite;
}
.shake-2{
animation: shake-2 0.3s;
animation-iteration-count: infinite;
}
.shake-3{
animation: shake-3 0.3s;
animation-iteration-count: infinite;
}
@keyframes shake-1 {
0% { transform: translate(0px) }
50% { transform: translate(2px) }
100% { transform: translate(0px) }
}
@keyframes shake-2 {
0% { transform: translate(0px) }
50% { transform: translate(-2px) }
100% { transform: translate(0px) }
}
@keyframes shake-3 {
0% { transform: translate(0px) }
50% { transform: translate(0px, 2px) }
100% { transform: translate(0px) }
}
html
<div class = "dyinglight-d shake-1" style = "left: 839.646px; top: 212.011px;">...</div>
<div class = "dyinglight-y shake-2" style = "left: 959.592px; top: 97.9469px;">...</div>
etc
Вот код, который я сделал для вас с кодом вашего сайта, чтобы показать пример его работы: https://codepen.io/ChrisRArendt/pen/jQXjNa
Вы можете сгенерировать стиль CSS, используя javaScript, для интеграции javaScript Math.random() в логику CSS.
Например, вы можете сгенерировать 10 ключевых кадров с именами от встряхнуть1 до встряхнуть10 со случайным преобразованием на 50% и добавить эти стили в стиль заголовка:
var css;
for (x=1;x=10;x++){
css += '@keyframes shake'+ x.toString() +' {';
css += '0% { transform: translate(0px)}';
css += '50% { transform: translate('+ Math.random() +'px)}';
css += '100% { transform: translate(0px)}';
css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );
Наконец, вы можете случайным образом назначить каждый ключевой кадр целевым div:
$('.goldrocks-g').each(function(){
(this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})
Java - это совсем другой язык программирования; вы используете JavaScript.