animaciones CSS en <span>

Estoy tratando de aplicar una animación CSS a un elemento <span> y simplemente no puedo hacer que funcione. No puedo encontrar ningún recurso que indique si las animaciones se pueden aplicar a los elementos <span>. Entonces, ¿soy yo quien está cometiendo un error, o la animación de span es inmune?animaciones CSS en <span>

Editar: Código

Inf<span class="inf_o">o</span>rmation 
    <br> 
do<span class="don_n">n</span>e 
    <br> 
we<span class="dbl_l">ll</span>

y CSS:

/* animations */ 
.inf_o 
{ 
    -webkit-animation-name: lower_head; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-timing-function:ease-in; 
    -webkit-animation-delay: 1s; 
    -webkit-animation-play-state: active; 
} 

@-webkit-keyframes lower_head 
{ 
    from {margin-top:0px;} 
    to {margin-top:10px;} 
}

Fuente

2011-07-30 providence

¿Podría hacer un violín con su código actual o publicarlo aquí? – Purag

puede ser que tenga que definir mostrar: bloquear en su css para span – sandeep

poner el código en la edición. Funciona cuando especifico display: block; ¿Hay alguna manera de hacer esto se puede hacer sin elementos de bloque? Me gustaría evitar numerosos flotadores y despeja. – providence

parece que tiene que establecer una propiedad de visualización. Obviamente bloqueará la palabra, por lo que debe usar en línea. Preparé un jsfiddle para usted: http://jsfiddle.net/jdmiller82/XWkRX/1/

Como puede ver, la 'o' se anima.

Fuente

2011-07-30 04:48:10

Perrfect, gracias un montón. – providence

¡De nada! ¡Buena suerte! –

La pantalla en línea no funcionó, pero sí lo hizo en línea, según su jsfiddle. ¡Gracias! – Josh

Tuve un momento difícil para hacer que mi animación span funcionara. En mi caso, la página se carga con el display del tramo establecido en none. Probé muchas soluciones, pero la que funcionó al final (desafortunadamente) fue eliminar el display: none de css y ocultarlo cuando se carga la página.

En caso de que importe, estoy usando jQuery para ocultar/mostrar el lapso.

Fuente

2017-12-06 15:54:07 Mashakal

Respuesta

Cuestiones relacionadas