Este script que estoy usando crea un efecto de texto giratorio para un título en un sitio que estoy construyendo. Quiero aumentar la velocidad a la que giran gradualmente, por lo que comienza lento, aumenta gradualmente la velocidad, mantiene la velocidad máxima de, digamos, 7x original y luego vuelve lentamente al ritmo inicial y lo hace en un ciclo.
El tiempo que se tarda en girar se establece actualmente al final de la función en el área '1200', por lo que supongo que debería provenir de una variable y tener ese comportamiento almacenado dentro de la función. Acabo de perder en dónde ir a continuación.
setInterval(() => { const up = document.querySelector('.span-one[data-up]'); const show = document.querySelector('.span-one[data-show]'); const down = show.nextElementSibling || document.querySelector('.span-one:first- child'); up.removeAttribute('data-up'); show.removeAttribute('data-show'); show.setAttribute('data-up', ''); down.setAttribute('data-show', ''); }, 1200);Aquí hay un código que puede ayudarlo. Tenga en cuenta que los estilos se aplican en un elemento simple. En su código también debe tener en cuenta el contexto.
/* Here you defined the animation. You can play around more and adjust the speed as you want */ @keyframes example { /* Here are some options */ /* uncomment the sections to experiment */ /* 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(120deg); } 75% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } */ /* 0% { transform: rotate(0deg); } 25% { transform: rotate(80deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(290deg); } 100% { transform: rotate(360deg); } */ 0% { transform: rotate(0deg); } 50% { transform: rotate(100deg); } 75% { transform: rotate(300deg); } 100% { transform: rotate(360deg); } /* You can google about the animations and how these percentages work, but actually its pretty simple */ } .rotating { /* This is optional, but needed if your title is block level element, just play around and see the differnce */ display: inline-block; /* this is mandatory */ animation-name: example; animation-duration: 5s; animation-iteration-count: infinite; } <html> <body> <h1 class="rotating">My Dear Rotating Title</h1> </body> </html>Stackoverflow es demasiado estricto al pegar el enlace a jsfiddle, así que lo incrusté aquí