Animation @keyframes

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