3

kurs

css

Lekcja 20: Animation @keyframes

css

Wraz z pojawieniem się wartości animation możemy tworzyć animacje z poziomu CSS. Z kolei @keyframes umożliwia precyzyjną kontrolę nad przebiegiem animacji.

Animacja

selektor { animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-interation-count] [animation-direction] [animation-fill-mode]; }

  • animation-name - nazwa dodawana także do reguły @keyframes animacji
  • animation-duration - czas wykonywania animacji
  • animation-timing-function - szybkość wykonywania animacji w różnych fazach jego trwania
    • linear - stała szybkość
    • ease - ease - szybciej na początku, wolniej pod koniec (domyślne ustawienie)
    • ease-in - wolniej na początku
    • ease-out - wolniej pod koniec
    • ease-in-out - wolniej na początku i pod koniec
    • cubic-bezier - własne ustawienie szybkości (wartości od 0 do 1)
  • animation-delay - opóźnienie rozpoczęcia animacji
  • animation-interation-count - liczba powtórzeń animacji
    • infinite - ciągłe powtarzanie
    • wartość liczbowa - liczba powtórzeń
  • animation-direction - kierunek animacji
    • normal - animacja będzie przebiegać od początku do końca
    • reverse - animacja będzie przebiegać od końca do początku
    • alternate - rozpoczęcie animacji od początku, powtarzanie w przeciwnym kierunku
    • alternate-reverse - rozpoczęcie animacji od końca, powtarzanie w przeciwnym kierunku
  • animation-fill-mode - wygląd animacji przed rozpoczęciem lub po zakończeniu
    • none - brak efektu (domyślne ustawienie)
    • forwards - styl elementu po zakończeniu animacji zgodny z deklaracją w ostatnim selektorze animacji
    • backwards - styl elementu przed rozpoczęciem animacji zgodny z deklaracją w pierwszym selektorze animacji
    • both - styl elementu po rozpoczęciu i zakończeniu animacji zgodny z deklaracjami odpowiednio w pierwszym i ostatnim selektorze animacji
  • animation-play-state - wstrzymanie lub wznowienie animacji
    • paused - wstrzymanie animacji
    • running - wznowienie animacji
.box { animacja 5s ease 1s infinite alternate none; }

@keyframes

@keyframes nazwa_animacji
{
0% { wartość }
25% { wartość }
50% { wartość }
75% { wartość }
100% { wartość }
}
@keyframes animacja
{
0% { margin-left: 0; background: dodgerblue }
25% { margin-left: 5%; background: crimson }
50% { margin-left: 15%; background: darkorange }
75% { margin-left: 30%; background: limegreen }
100% { margin-left: 60%; background: darkgreen }
}

Przykład animacji

.box {
padding: 15px; margin: 10px 0px 0px 20px; width: 95px; height: 95px;
animation: animacja 5s ease 1s infinite alternate none;
}

.box:hover { animation-play-state:paused; }

@keyframes animacja
{
0% { margin-left: 0; background: dodgerblue }
25% { margin-left: 5%; background: crimson }
50% { margin-left: 15%; background: darkorange }
75% { margin-left: 30%; background: limegreen }
100% { margin-left: 60%; background: darkgreen }
}
Przykład

Animacja tła i przemieszczanie box-a.

Prefixy

Do poprawnej obsługi animacji przez różne przeglądarki należy pamiętać o prefiksach.

selektor {
-webkit-animation: wartości;
-moz-animation: wartości;
-o-animation: wartości;
animation: wartości;
}

@-webkit-keyframes nazwa_animacji
{
wartości;
}

@-moz-keyframes nazwa_animacji
{
wartości;
}

@-o-keyframes nazwa_animacji
{
wartości;
}

@keyframes nazwa_animacji
{
wartości;
}
comments powered by Disqus

Do góry