0

Tengo 2 elementos <span> con texto dentro, cuando este completo sean mas, la idea es mostrarlos de a uno en la siguiente loop.

loop 
      animacion mostrar elemento 1
      animacion ocultar elemento 1
      animacion mostrar elemento 2
      animacion ocultar elemento 1

La animación para mostrarlos no es la gran cosa solo un cambio de opacidad, el problema es que no puedo hacer que la animación funcione de a 1, por ahora tengo lo siguiente

.text-center {
  text-align: center;
  margin-top: 32px
}


.item-tag {
    background: #0288D1;
    color: #fff;
    font-family: Lato, Roboto, Verdana;
    font-size: 18px;
    padding: 12px 32px;
    border-radius: 64px;
    
}

.item-0 {
    animation-delay: 0s;
    animation-name: bounceIn;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.item-1 {
    animation-delay: 4s;
    animation-name: bounceIn;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
        display: none;
        visibility: hidden;
    }

    1% {
        display: inline;
        visibility: visible;
    }

    30% {
        transform: scale(2);
        opacity: 1;
        
    }
    70% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
        display: none;
        visibility: hidden;
    }
}
<div class="text-center">
        <span class="item-tag item-0">
            Item A
        </span>
        <span class="item-tag item-1">
            Item B
        </span>
</div>

1 respuesta 1

0

una opcion seria utilizar animation-direction: reverse; que como es claro hace la animacion de atras hacia adelante

.text-center {
  text-align: center;
  margin-top: 32px
}


.item-tag {
    background: #0288D1;
    color: #fff;
    font-family: Lato, Roboto, Verdana;
    font-size: 18px;
    padding: 12px 32px;
    border-radius: 64px;
    
}

.item-0 {
    animation-delay: 0s;
    animation-name: bounceIn;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.item-1 {
    animation-delay: 0s;
    animation-name: bounceIn;
    animation-direction: reverse;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
        display: none;
        visibility: hidden;
    }

    1% {
        display: inline;
        visibility: visible;
    }

    30% {
        transform: scale(2);
        opacity: 1;
        
    }
    70% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
        display: none;
        visibility: hidden;
    }
}
<div class="text-center">
        <span class="item-tag item-0">
            Item A
        </span>
        <span class="item-tag item-1">
            Item B
        </span>
</div>

2
  • claro pero quiero que se vea un unico elemento a la ves y que cuando termine la animacion del anterior, comience la del siguiente el 29 may. 2018 a las 2:11
  • Ya es cuestion de que modifiques la animación el 29 may. 2018 a las 3:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.