Articles of animación

Cómo animar el icono de la hamburguesa animada CSS en MouseOver

Tengo un ícono animado de CSS Hamburger en http://elijahmanor.com/css-animated-hamburger-icon/ y quiero usarlo pero quiero usarlo al pasar el cursor para ver el conjunto ex (x) y cuándo. No coloque el cursor sobre el estilo por defecto de 3 líneas. Pero no puedo hacer eso, incluso he usado la función hover. document.querySelector(“#nav-toggle”) .addEventListener(“click”, function() { this.classList.toggle(“active”); […]

Animaciones de fotogtwigs clave de CSS al desplazarse: restablecimiento de la animación con el movimiento del mouse

Consulte el siguiente código para ver una animación simple de fotogtwigs clave en el hover. .behind { width: 200px; height: 200px; background: red; position: absolute; } .infront { width: 200px; height: 200px; background: blue; position: absolute; } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } […]

La animación de los fotogtwigs clave de CSS 3 (opacidad) hace que las imágenes salgan borrosas al final

La animación sucede perfectamente, las imágenes no son borrosas, etc. Pero cuando termina, la imagen se ve borrosa y permanece así. El navegador que estoy probando es Chrome, pero independientemente del navegador, sucede. Todas las imágenes utilizadas en la animación de blink no son scalet, se muestran en su tamaño original. Aquí está mi CSS: […]

Animar enlace subrayado en el clic en lugar de en el desplazamiento?

¿Tiene problemas para entender cómo puedo recrear este efecto como un clic en lugar de en el desplazamiento? No soy muy bueno con jQuery, así que tengo problemas para averiguar cómo puedo hacer que esto suceda con un clic. Encontré este sitio web para ayudar a crear el efecto que estoy buscando (subrayar de izquierda […]

¿Cómo animar algunas partes de una imagen usando CSS?

Tengo una imagen y quiero animar algunas partes de ella utilizando CSS. Entonces, tengo una pregunta: ¿Puedo animar algunas partes de una imagen con AutoPlay? Quiero decir que después de un período de tiempo debería animarse sin recargar toda la página. ¿Posible? Ejemplo de imagen: El disco con 24 debe aparecer ligeramente redondeado (como una […]

Usando la animación de rebote en un elemento escalado

¿Cuál es la mejor manera de tener algo de escala y luego realizar una animación de rebote en ese factor de escala antes de volver al factor de escala original? Me doy cuenta de que podría hacer algo como escalarlo a 2.2, luego a 1.8, luego a 2.0, pero estoy buscando una manera en la […]

Revelar texto desde el centro con la animación CSS

Soy un poco nuevo en CSS3 Animations y espero que alguien pueda ayudarme a darme cuenta de esto. Estoy teniendo un div con texto en él. Me gustaría revelar esta div desde el centro. Parece un poco simple, pero hasta ahora no encontré la manera perfecta de darme cuenta. Necesito usar .text-div { clip-path: inset(top […]

CSS – prevenir: ¿desplazarse durante la animación?

Tengo un que reproduce una animación. Quiero evitar que div:hover tenga efecto en ese mientras la animación aún se está reproduciendo. Por ejemplo: div:before { content: “A”; -webkit-animation: A 5s; -moz-animation: A 5s; animation: A 5s; } @-webkit-keyframes A { 100% { font-size: 5em; } } @-moz-keyframes A { 100% { font-size: 5em; } } […]

Animando con variables angulares 4

Estoy usando @angular/animations: 4.4.6 para probar y tener una animación expandir / contraer para un componente que mostrará una gran cantidad de texto. Por defecto, mostrará una cierta cantidad de texto, pero diferentes componentes principales pueden definir una altura de contracción diferente. Por lo que puedo decir, estoy haciendo todo bien. Pero el decorador de […]

Transición de animación CSS

Tengo algún problema con mi lógica de tiempo de transición de animación en mi css. Tengo 3 imágenes que tengo que hacer una presentación. Quiero cambiar la imagen de image1 a image2 en 15 segundos y formar image2 a image3 en 15 segundos y volver de la imagen 3 a la imagen 1 en 30 […]