Obecnie mam ten kod:
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}
Miga, ale miga tylko „w jednym kierunku”. To znaczy, tylko zanika, a potem pojawia się ponownie opacity: 1.0
, potem znowu zanika, pojawia się ponownie i tak dalej ...
Chciałbym, aby zanikło, a następnie „podniosło” to zanikanie z powrotem do opacity: 1.0
. Czy to jest możliwe?
html
css
css-animations
opacity
ojek
źródło
źródło
Odpowiedzi:
Najpierw ustawiasz,
opacity: 1;
a potem kończysz0
, więc zaczyna się0%
i kończy100%
, więc zamiast tego po prostu ustaw krycie na0
at,50%
a reszta sama się zajmie.Próbny
Tutaj mam ustawienie czasu animację
1 second
, a następnie ja ustawienietiming
sięlinear
. Oznacza to, że będzie stały przez cały czas. Wreszcie używaminfinite
. Oznacza to, że będzie trwać.Jak skomentowano, nie będzie działać na starszych wersjach Internet Explorera, a do tego musisz użyć jQuery lub JavaScript ...
Dzięki Alnitak za zaproponowanie lepszego podejścia .
Demo (migacz za pomocą jQuery)
źródło
blinker
jako oddzwanianie kończące.fadeIn
połączenie.(function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
step-end
zamiastlinear
tego chciałem.Użyj
alternate
wartości dlaanimation-direction
(i nie musisz dodawać żadnych ramek w ten sposób).CSS :
I usunęliśmy
from
klatkę. Jeśli go brakuje, jest generowany na podstawie wartości ustawionej dla właściwości animowanej (opacity
w tym przypadku) na elemencie lub, jeśli go nie ustawiłeś (aw tym przypadku nie ustawiłeś), na podstawie wartości domyślnej (który jest1
dlaopacity
).I proszę, nie używaj tylko wersji WebKit. Dodaj również nieprefiksowany jeden po nim. Jeśli chcesz po prostu napisać mniej kodu, użyj skrótu .
źródło
cubic-bezier
częśćease-in-out
lub coś innego: cubic-bezier.comNajlepszy sposób na uzyskanie czystego „100% włączenia, 100% zniżki”, podobnie jak stare,
<blink>
wygląda następująco:źródło
color
właściwością itp. Inne rzeczy to obejścia lub animacje „zanikania”.Alternatywnie, jeśli nie chcesz stopniowego przechodzenia między pokazem a ukrywaniem (np. Migający kursor tekstowy), możesz użyć czegoś takiego:
Każdy
1s
.cursor
przejdzie odvisible
dohidden
.Jeśli animacja CSS nie jest obsługiwana (np. W niektórych wersjach Safari), możesz wrócić do tego prostego interwału JS:
Ten prosty JavaScript jest w rzeczywistości bardzo szybki i w wielu przypadkach może nawet być lepszym domyślnym niż CSS. Warto zauważyć, że wiele wywołań DOM powoduje spowolnienie animacji JS (np. $ .Animate () JQuery'ego).
Ma również drugą zaletę, że jeśli dodasz
.cursor
elementy później, będą one animowane dokładnie w tym samym czasie, co inne.cursor
s, ponieważ stan jest współdzielony, o ile wiem, jest to niemożliwe z CSS.źródło
Nie wiem dlaczego, ale animowanie tylko
visibility
właściwości nie działa w żadnej przeglądarce.Możesz animować
opacity
właściwość w taki sposób, że przeglądarka nie ma wystarczającej liczby ramek, aby zanikać lub pomijać tekst.Przykład:
źródło
step-start
(zobacz moją odpowiedź).Zmień czas trwania i krycie, aby dopasować.
źródło
Pokaż fragment kodu
źródło
Późno, ale chciałem dodać nową z większą liczbą klatek kluczowych ... oto przykład na CodePen, ponieważ wystąpił problem z wbudowanymi fragmentami kodu:
źródło
źródło
Działa to dla mnie za pomocą class = blink dla odpowiednich elementów
Prosty kod JS
źródło