Css keyframes Как сделать эффект дрожания?

Question

[GaserV]

Подскажите, как сделать эффект дрожания? Мне нужно, чтобы анимация производилась раз в минуту.

Answer 1

[devstudent]

смотря как вы понимаете дрожание, это определяет какие стили анимировать в кейфреймс, кроме того надо знать сколько времени длится дрожание

Comments

[GaserV]

ну например по умолчанию right: 0; при анимации смещать right: -5px и обратно, длительностью в пол секунды, на протяжении 2 сек, каждую минуту

[devstudent]

а вообще если хотите daneden.github.io/animate.css вот готовая анимация. разные эффекты. подключаете цсс-файл и добавляете классы куда надо. и все

[devstudent]

@keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}

20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
-ms-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}

.shake {
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
вот вам база, меняйте время или смещение в пикселях или проценты под свои запросы

[GaserV]

devstudent: Спасибо. А еще такой вопрос. Как на js сделать, чтобы каждую минуту прописывался класс к .alarm?

[devstudent]

GaserV: а для чего? именно каждую секунду?

[GaserV]

devstudent: у меня есть иконка уведомлений. Мне нужно чтобы раз в минуту она дергалась. Соответственно ей нужно раз в 1 минуту добавлять класс какой-нибудь из animate.css

[devstudent]

просто добавьте класс в разметку. вернее два класса. animate shake, например, все будет работать как надо. насчет одной минуты. выставьте время в -webkit-animation-duration: 60s;
animation-duration: 60s, а чтобы дергалась иконка пару секунд , а не целую минуту,
поменяйте проценты в кейфреймс, проценты там будут считаться от вашей минуты. просчитайте сколько в процентах будет 3 секунды, например, и впишите. вместо проставленных в animate.css кейфреймс вашей анимации, а через js - неправильно будет.

[devstudent]

если надо бесконечную анимацию, не забудьте добавить класс infinite или дописать в класс вашего элемента -webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;

[GaserV]

devstudent: понял, спасибо

[GaserV]

devstudent: у меня анимация бесконечная, но без задержок. Мне нужно чтобы раз в минуту. animation-delay: 3s не срабатывает, оно воспроизводится сразу поокончанию

[devstudent]

GaserV: попробуйте добавить свойство animation-delay