CSS-Only Play/Pause

by Scott Kaye

HTML

<div id="box"></div>

<a class="start" href="#">Start</a>
<a class="stop" href="#box">Stop</a>

SCSS

#box {
    background: green;
    width: 40px;
    height: 40px;
    margin-top: 20px;
    animation: move 1s infinite alternate linear;
    
    &:target {
      background: red;
      animation-play-state: paused;
	  
	  & ~ .stop { display: none; }
	  & ~ .start { display: initial; }
    }
}

@keyframes move {
    to { transform: translateX(300px); }
}

a {
  -webkit-appearance: button;
  text-decoration: none;
  padding: 3px 8px;
  color: inherit;
  font-family: sans-serif;
  font-size: 0.9em;
}

.start { display: none; }