CSS3 @keyframe 50%

0

Dzień dobry.

Poszukiwałem sposobu na zrobienie animacji mrugania. Znalazłem na StackOverflow taki kod:


.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Jednak nie wiem do czego służy keyframe i dlaczego jest tam 50%?

link

Proszę o wyjaśnienie. Dzięki.
M.

1

klatki kluczowe. 50% bo w połowie animacji ma się zrobić opacity: 0,

wejdź na stronę MDN i zobacz sobie
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

0

Dzięki. A dlaczego animacja mrugania nie działa jak dam 100% zamiast 50%?

0

działa przecież https://jsfiddle.net/3wz8y2nb/

1

Jak dasz 100% to animacja będzie płynnie przechodziła od 0% do 100% po czym wróci do zera i będziesz widział nagłe mrugnięcie do wartości początkowej zamiast płynnego przejścia od 0% do 50% i z powrotem od 50% do 100%.
Jak chcesz nagły skok to możesz też ustawić inne klatki np:

blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }
  69% { /* nice */
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

rozwój HTMLa pozwolił nam zatoczyć pełne koło i możesz ostylować do tego customowy tag "blink" który kiedyś naprawdę działał w ten sposób :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1