x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.springy-text {
5
  color: darkslateblue;
6
  animation-name: springy-text;
7
  animation-duration: 1s;
8
  animation-timing-function: ease-in;
9
  animation-delay: 0s;
10
  animation-iteration-count: infinite;
11
  animation-direction: alternate-reverse;
12
  animation-play-state: running;
13
  animation-fill-mode: backwards;
14
}
15
@keyframes springy-text {
16
  0%   {
17
    letter-spacing: 1.2em;
18
    color: thistle;
19
  }
20
  100%   {
21
    letter-spacing: 0.1em;
22
    color: darkslateblue;
23
  }
24
}
25
</style>
26
27
<!-- Script to pause/start the animation -->
28
<script>
29
  function togglePlayState(newState) {
30
    document.getElementById("springy").style.animationPlayState=newState;
31
  }
32
</script>
33
34
<h3 class="springy-text" id="springy">Animations!</h3>
35
<button onclick="togglePlayState('Paused');">Pause Animation</button>
36
<button onclick="togglePlayState('Running');">Continue Animation</button>