Articles of animación

Animación SVG y Firefox

Tengo problemas con el dibujo de animación SVG, que funciona perfectamente en todos los navegadores (incluso IE no tiene problemas con eso), solo Firefox no dibuja correctamente Script it self work en todos los navegadores modernos Script tomó de – http://tympanus.net/Development/SVGDrawingAnimation/ Pero cuando genero código SVG a partir de una imagen vectorial, no funciona en […]

No se puede hacer que la transición de ancho CSS funcione

No pude encontrar cómo hacer que la transición de ancho CSS funcione. Bueno, en realidad funciona, pero solo pasa de auto a 100% sin animación. Aquí está mi CSS: div#searchbar { padding: 10px; background-color: #404040; } .searchbar input { box-sizing: border-box; padding: 10px; font-family: Open Sans; font-size: 16px; color: #404040; outline: none; background-color: #909090; padding-left: […]

Necesita una pequeña ayuda en la animación SVG

He estado intentando arduamente establecer la animación en círculo. He llegado a este punto: Solo quiero una pequeña ayuda para mover el cargador animado entre M y T para que represente eso como O. Intenté jugar con M puntos y cálculos pero no tuve éxito. ¿Estoy haciendo algo mal? Gracias de antemano compañeros. Muy apreciado. […]

Efecto de animación de impulso de lona

Estoy estudiando el siguiente canvas de animación de Matei Copot. Alguien puede explicar cómo funciona el “impulso” / efecto de disparo, y cómo, digamos, puedo simplificar el código para que solo tenga 3 puntos estacionarios a, b y c (al tiempo que muestra el efecto de impulso entre a-> b y entre b -> do)? […]

¿Cómo mover el texto a la izquierda en el hover?

Cuando el cursor del mouse se ha movido hacia el botón, el texto se mueve hacia abajo, necesito mover el texto solo a la izquierda de 5px , cuando se presiona el botón, ¿cómo implementarlo? div { text-align: center; } span { margin-right: 10px; } button { background: green; border: none; padding: 9px; color: #FFF; […]

¿Cómo continuar la animación de CSS en: ¿deslizar después de que el mouse deje el elemento?

Hay ejemplo de animación: .b-ball_bounce {transform-origin: top;} @-webkit-keyframes ball_animation { 20% {transform: rotate(-9deg);} 40% {transform: rotate(6deg);} 60% {transform: rotate(-3deg);} 80% {transform: rotate(1.5deg);} 100% {transform: rotate(0deg);} } .b-ball_bounce:hover { -webkit-animation: ball_animation 1.5s; animation-iteration-count: 1; } Cuando el mouse se desplaza sobre un elemento comienza la animación. Pero cuando el ratón se va, la animación se detiene […]

Forma de relleno SVG sensible

#fg { fill: url(#ship); stroke: #fff; stroke-width: 10px; stroke-dasharray: 1024px; -webkit-animation: dash 2s; animation: dash 2s; } @keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } @-webkit-keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } #bg { fill: white; stroke: none; transform-origin: 1270px 550px; -webkit-animation: […]

Problema de animación CSS IE10

El problema que tengo es que una pequeña sección de un sitio web que he construido funciona perfectamente en todos los navegadores y en las versiones antiguas de IE, pero no en las versiones más recientes. Como ya sabrá, IE ya no admite las declaraciones [IF] en HTML y no parece admitir el comando. Mi […]

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); } } […]