Как сделать анимацию на css или js?

Question

[Ghena_29]

Как сделать анимацию как на этом шаблоне - https://office42258.wixsite.com/bulletspinner
когда только заходите(или обновляете) страницу в шапке центральный текст "BULLET SPINNER" крутиться как спиралька.

Как можно реализовать такую анимацию на css или JS ?

Answer 1

[ink]

трансфом:скале()ротате(); + плагин wow.js + animate.css

Comments

[Ghena_29]

трансфом:скале()ротате(); -пробывал

скале() почему то не работает,все крутиться,но не увечивается

[ink]

Ghena_29, почему не крутится - смотри : https://codepen.io/topicstarter/pen/yKoMKV?editors=0110

[Ghena_29]

ink, нужно примерно сделать так:
@keyframes spinner {
0%{
transform: scale(0);
}
100%{
transform: rotate(360deg)scale(1);
}
}

как только заходим на сайт,что бы скале() был равен 0,и в анимации он увеличивался до 1 и так оставался,как-то так

[ink]

Ghena_29, ну да ! я именно так и писал - что бы анимация выполнялась постепенно нужно разбивать её на фрагменты .... 10% 20% 30% и т д понимаешь ?

[kulaeff]

Ghena_29, чтобы элемент оставался с теми же значениями, которые были в последнем кадре, то надо вместо infinite указать 1 (проиграть анимацию один раз), а затем дописать forwards (это fill mode, говорящий, что элемент должен остаться таким, каким он был в последнем кадре)

[Ghena_29]

спасибо,помогли)!