animación de anulación con: ciernen

tengo la siguiente animación CSS:animación de anulación con: ciernen

.border-strobe { 
    -webkit-animation: border-strobe-animation 1.5s infinite ease-in-out; 
} 

@-webkit-keyframes border-strobe-animation { 
    0% {border:2px solid #FF1d38;} 
    50% {border:2px solid #000000;} 
    100% {border:2px solid #FF1d38;} 
}

Básicamente, lo que quiero hacer es:

• Al pasar por encima (por lo .border-strobe:hover), por ejemplo, quiero cambiar el color del borde al #FF1D38.

• Una vez que salgo del vuelo estacionario, quiero simplemente dejar que la animación se ejecute en su curso normal.

El problema, sin embargo, es que tengo algunos elementos en las páginas con la clase .border-strobe y deseo mantenerlos a tiempo.

¿Existe una manera simple de anular el color del borde usando el control deslizante y mantener las animaciones consistentes entre sí, o actualmente no es posible hacerlo?

¿Tiene sentido?

Fuente

2012-05-04 LeeR

O si alguien sabe de una manera diferente, sin necesidad de utilizar JavaScript, si me das un toque, puedo trabajar fuera el resto :) – LeeR

No estoy muy familiarizado con CSS3, pero Estoy pensando que la única forma de detener todas las animaciones, a tiempo mientras solo cambia el color del borde del elemento que está suspendido actualmente, es usar solo JS. –

sería mejor si añades algún código ... –

¿Hay alguna razón por la que desee que la animación continúe funcionando normalmente?

Si el color de desplazamiento que desea es el mismo que el principio y el final de la animación, ¿por qué no mata la animación al desplazarse mientras se define el color del borde en la clase de vuelo estacionario?

Esto es lo más cerca que pude conseguir: http://jsfiddle.net/xsjJy/

ACTUALIZACIÓN

No puedo creer que no haya ocurrido antes! Si está dispuesto a modificar el código HTML, puede agregar un intervalo de máscara (o div o lo que quiera), y simplemente haga que cambie el borde cuando pase el cursor sobre el borde-luz estroboscópica.

Aquí está la actualización jsFiddle: http://jsfiddle.net/xsjJy/2/

Fuente

2012-05-04 18:18:08

Sin embargo, me di cuenta de que no podía mantener sincronizadas las animaciones. –

Mantener las animaciones sincronizadas es la razón principal por la que quiero mantenerlo en funcionamiento. Gracias por intentarlo. – LeeR

Guau ... ¡No puedo creer que no haya pensado en eso! A veces creo que trato de ser demasiado complejo. Gracias por eso... – LeeR

animación de anulación con: ciernen

Respuesta

Cuestiones relacionadas