Actualmente, tengo este código:
@-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;
}
Parpadea, pero solo parpadea en "una dirección". Quiero decir, solo se desvanece, y luego aparece de nuevo con opacity: 1.0
, luego se desvanece nuevamente, aparece de nuevo, y así sucesivamente ...
Me gustaría que se desvaneciera, y luego "subir" de este desvanecimiento nuevamente opacity: 1.0
. ¿Es eso posible?
html
css
css-animations
opacity
ojek
fuente
fuente
Respuestas:
Primero está configurando
opacity: 1;
y luego lo está terminando0
, por lo que comienza0%
y termina100%
, así que simplemente configure opacidad en0
at50%
y el resto se encargará de sí mismo.Manifestación
Aquí, configuro la duración de la animación para que sea
1 second
, y luego configuro latiming
paralinear
. Eso significa que será constante en todo momento. Por último, estoy usandoinfinite
. Eso significa que seguirá y seguirá.Como se comentó, esto no funcionará en versiones anteriores de Internet Explorer, y para eso necesita usar jQuery o JavaScript ...
Gracias a Alnitak por sugerir un mejor enfoque .
Demostración (Blinker usando jQuery)
fuente
blinker
como devolución de llamada de finalización a la.fadeIn
llamada.(function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
step-end
en lugar delinear
era lo que quería.Use el
alternate
valor paraanimation-direction
(y no necesita agregar ningún marco de imagen de esta manera).CSS :
He eliminado el
from
fotograma clave. Si falta, se genera a partir del valor que ha establecido para la propiedad animada (opacity
en este caso) en el elemento, o si no lo ha establecido (y no lo ha hecho en este caso), a partir del valor predeterminado (que es1
paraopacity
)Y por favor no use solo la versión WebKit. Agregue el no prefijado después también. Si solo quieres escribir menos código, usa la taquigrafía .
fuente
cubic-bezier
pieza conease-in-out
o algo más: cubic-bezier.comLa mejor manera de obtener un parpadeo puro de "100% encendido, 100% apagado", como el anterior,
<blink>
es así:fuente
color
propiedades, etc. Otras cosas son soluciones alternativas o animaciones "fade".Alternativamente, si no desea una transición gradual entre mostrar y ocultar (por ejemplo, un cursor de texto parpadeante) puede usar algo como:
Todo
1s
.cursor
irá devisible
ahidden
.Si la animación CSS no es compatible (por ejemplo, en algunas versiones de Safari), puede recurrir a este simple intervalo JS:
Este simple JavaScript es realmente muy rápido y, en muchos casos, incluso puede ser un valor predeterminado mejor que el CSS. Vale la pena señalar que hay muchas llamadas DOM que hacen que las animaciones JS sean lentas (por ejemplo, $ .animate () de JQuery).
También tiene la segunda ventaja de que si agrega
.cursor
elementos más adelante, aún se animarán exactamente al mismo tiempo que los demás.cursor
, ya que el estado es compartido, esto es imposible con CSS, que yo sepa.fuente
No sé por qué, pero animar solo la
visibility
propiedad no funciona en ningún navegador.Lo que puede hacer es animar la
opacity
propiedad de tal manera que el navegador no tenga suficientes marcos para fundir o desvanecer el texto.Ejemplo:
fuente
step-start
(vea mi respuesta).Cambia la duración y la opacidad a tu gusto.
fuente
Mostrar fragmento de código
fuente
Tarde pero quería agregar uno nuevo con más fotogramas clave ... aquí hay un ejemplo en CodePen ya que hubo un problema con los fragmentos de código incorporados:
fuente
fuente
Funciona para mí usando class = blink para los elementos respectivos
Código JS simple
fuente