Foros del Web » Creando para Internet » CSS »

keyframes y animation

Estas en el tema de keyframes y animation en el foro de CSS en Foros del Web. Hola [email protected], llevo un rato peleándome con las animaciones, y no consigo hacer que se queden bien... Tengo 2 divs, y este es el css ...
  #1 (permalink)  
Antiguo 09/03/2012, 05:04
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 8 años
Puntos: 51
keyframes y animation

Hola [email protected], llevo un rato peleándome con las animaciones, y no consigo hacer que se queden bien...
Tengo 2 divs, y este es el css para ellos:

Código CSS:
Ver original
  1. @-webkit-keyframes uno{
  2.      from {
  3.        opacity: 0.0;
  4.        font-size: 100%;
  5.      }
  6.      to {
  7.        opacity: 1.0;
  8.        font-size: 100%;
  9.      }
  10. }
  11.  
  12. #div1
  13. {      
  14.   -webkit-animation-name: uno;
  15.   -webkit-animation-duration: 10s;
  16.   -webkit-animation-iteration-count: infinite;
  17.   -webkit-animation-timing-function: ease-in-out;
  18.   -webkit-animation-direction: alternate;
  19. }
  20.  
  21. @-webkit-keyframes dos{
  22.      from {
  23.        opacity: 0.0;
  24.        font-size: 100%;
  25.      }
  26.      to {
  27.        opacity: 1.0;
  28.        font-size: 100%;
  29.      }
  30. }
  31.  
  32. #div2
  33. {      
  34.   -webkit-animation-name: dos;
  35.   -webkit-animation-duration: 10s;
  36.   -webkit-animation-iteration-count: infinite;
  37.   -webkit-animation-timing-function: ease-in-out;
  38.   -webkit-animation-direction: alternate;
  39.   -webkit-animation-delay:15s;
  40.    opacity: 0.0;
  41. }

Como podéis ver, para el div2 le pongo inicialmente opacity: 0.0 para que no se vea, y -webkit-animation-delay:15s para que espere a que el primer div termine y entonces se muestra el div2....pero al final acaban cruzándose....y no encuentro la manera de que no se crucen......
No sé si me explico, yo lo que busco es que cada 10 segundos se muestre el contenido de un div.

Saludos y gracias de antemano, Daniel
  #2 (permalink)  
Antiguo 13/03/2012, 04:37
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 8 años
Puntos: 51
Respuesta: keyframes y animation

Hey gracias

Lo solucioné. Me costó entender el funcionamiento, pero una vez que lo entendí fue fácil.

Saludos, Daniel

Etiquetas: animation, contenido, divs, keyframes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:00.