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>