Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!DOCTYPE html> <title>Example</title> <style> .springy-text { color: darkslateblue; animation-name: springy-text; animation-duration: 1s; animation-timing-function: ease-in; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-play-state: running; animation-fill-mode: backwards; } @keyframes springy-text { 0% { letter-spacing: 1.2em; color: thistle; } 100% { letter-spacing: 0.1em; color: darkslateblue; } } </style> <!-- Script to pause/start the animation --> <script> function togglePlayState(newState) { document.getElementById("springy").style.animationPlayState=newState; } </script> <h3 class="springy-text" id="springy">Animations!</h3> <button onclick="togglePlayState('Paused');">Pause Animation</button> <button onclick="togglePlayState('Running');">Continue Animation</button>
Preview