Tengo el siguiente código:
/*Vertical Flip*/ .verticalFlip { display: inline; } .verticalFlip span { animation: vertical 5s linear infinite 0s; -ms-animation: vertical 5s linear infinite 0s; -webkit-animation: vertical 5s linear infinite 0s; color: #ea1534; opacity: 0; overflow: hidden; position: absolute; } .verticalFlip span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateX(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateX(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } /* text */ #hero h1 { margin: 0; font-size: 64px; font-weight: 700; line-height: 56px; color: transparent; background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; } <section id="hero"> <h1 style="margin-bottom: 16px">Sample <div class="verticalFlip"><span>Change</span><span>Text</span></div> </h1> </section>Esto funciona bien, sin embargo, ¿cómo puedo eliminar el retraso? Hay una pausa larga después de que se completa la alternancia de texto. Me gustaría que fuera instantáneo donde sigue alternando el texto de manera fluida. Lo único que me gustaría eliminar es la pausa larga, eso es todo. No estoy seguro de qué propiedad css está causando ese problema. ¿Alguna sugerencia?
Debe jugar con la duración de la animación y también ajustar los porcentajes de fotogramas clave -> la interpolación cuando voltea el texto usando sus reglas de transformación/opacidad .
He ajustado ligeramente cada uno, pero esto se reduce a un gusto de cómo quieres que se vea y se sienta . Difundir la animación de volteo sobre más de un porcentaje (su interpolación) disminuirá la cantidad de tiempo que tiene en una pausa entre animaciones.
/*Vertical Flip*/ .verticalFlip { display: inline; } .verticalFlip span { animation: vertical 3.4s linear infinite 0s; -ms-animation: vertical 3.4s linear infinite 0s; -webkit-animation: vertical 3.4s linear infinite 0s; color: #ea1534; opacity: 0; overflow: hidden; position: absolute; } .verticalFlip span:nth-child(2) { animation-delay: 2s; -ms-animation-delay: 2s; -webkit-animation-delay: 2s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical { 0% { opacity: 0; } 15% { opacity: 0; -moz-transform: rotateX(180deg); } 35% { opacity: 1; -moz-transform: translateY(0px); } 55% { opacity: 1; -moz-transform: translateY(0px); } 80% { opacity: 0; -moz-transform: translateY(0px); } 90% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes vertical { 0% { opacity: 0; } 15% { opacity: 0; -webkit-transform: rotateX(180deg); } 35% { opacity: 1; -webkit-transform: translateY(0px); } 55% { opacity: 1; -webkit-transform: translateY(0px); } 80% { opacity: 0; -webkit-transform: translateY(0px); } 95% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical { 0% { opacity: 0; } 15% { opacity: 0; -ms-transform: rotateX(180deg); } 35% { opacity: 1; -ms-transform: translateY(0px); } 55% { opacity: 1; -ms-transform: translateY(0px); } 80% { opacity: 0; -ms-transform: translateY(0px); } 95% { opacity: 0; } 100% { opacity: 0; } } /* text */ #hero h1 { margin: 0; font-size: 64px; font-weight: 700; line-height: 56px; color: transparent; background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat; background-clip: text; -webkit-background-clip: text; } <section id="hero"> <h1 style="margin-bottom: 16px">Sample <div class="verticalFlip"><span>Change</span><span>Text</span></div> </h1> </section>