Animacje w css

Animacje w css dzięki nim możesz stopniowo zmieniać określone style danego elementu w czasie – to naprawdę potężne narzędzie. Animacje css możesz traktować jak oś czasu. Aby utworzyć animację, musisz najpierw określić kilka klatek kluczowych. Dla zdefiniowania klatki kluczowej używamy zapytania @keyframes i nadajemy jej, jej własna, specyficzną nazwę.

Dla pierwszej klatki kluczowej na początku animacji czyli 0% definiujesz właściwości startowe i tak samo dla ostatniej klatki czyli 100% również definiujesz właściwości.

Następnie aby zastosować tę animację do elementu, należy wybrać element docelowy, dodając do niego nazwę animacji animation-name. Następnie wystarczy określić czas trwania animacji css animation-duration i tu możesz podać na przykład 1 minutę lub 1 milisekundę. Oraz podajesz ilość powtórzeń animacji, ponieważ defaultowo animacja odtwarza się tylko raz animation-iteration-count. Jeśli chcesz by animacja odtwarzała się cały czas ustawiasz parametr na wartośćinfinite.

 

@keyframes float
0%
transform: translateY(-20px)
100%
transform: translateY(20px)

.element
animation-name: float
animation-duration: 1s
animation-iteration-count: infinite