CSS3 @keyframe 50%

mpaw
  • Rejestracja:około 9 lat
  • Ostatnio:około miesiąc
  • Postów:530
0

Dzień dobry.

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

Kopiuj

.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.


That's all folks ;)
Tasmanian Devil
Hej! Twój post prawdopodobnie zawiera niesformatowany kod. Użyj znaczników ``` aby oznaczyć, co jest kodem, będzie łatwiej czytać. (jestem botem, ta akcja została wykonana automatycznie, prawdopodobieństwo 0.99823946)
mpaw
Nie mogę edytować posta :/
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:około 4 godziny
  • Postów:8423
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


mpaw
  • Rejestracja:około 9 lat
  • Ostatnio:około miesiąc
  • Postów:530
0

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


That's all folks ;)
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:około 4 godziny
  • Postów:8423
0

mpaw
Faktycznie, przepraszam, musiałem coś źle wpisać.
obscurity
  • Rejestracja:około 6 lat
  • Ostatnio:10 minut
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:

Kopiuj
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 :)


"A car won't take your job, another horse driving a car will." - Horse influencer, 1910
edytowany 1x, ostatnio: obscurity
Freja Draco
Freja Draco
marquee! ;)
obscurity
@Freja Draco: aż sprawdziłem i nadal działa
Freja Draco
Freja Draco
@obscurity: Zaiste, aż sama sprawdziłam. Kiedyś specjalnie wyłączałam działanie marquee którąś z wtyczek, ale od wieków już nie widziałam tego w użyciu, więc myślałam, że już nie działa. Teraz to samo CSS-em robią. Animacje CSS-owe też blokuję.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.