JSFiddle - React, Tailwind, and code Playground

by Geoffrey

HTML

<div id="anim">
    <a href="#pau" id="pause">pause</a>
    <a href="#str" id="start">start</a>
    <b id="pau"></b>
    <b id="str"></b>
    <div>HELLO WORLD!</div>
</div>

CSS

#anim{
    font-family:sans-serif;
}
#anim div{
    font-size:4em;
    -webkit-animation:anim 5s ease infinite;
    -moz-animation:anim 5s ease infinite;
    -ms-animation:anim 5s ease infinite;
}

#anim b#pau:target ~ div{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -ms-animation-play-state:paused;
}
#anim b#str:target ~ div{
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -ms-animation-play-state:running;
}

#pause,#start{
    font-size:1.2em;
    padding:.5em;
    background:#111;
    color:white;
}

b{
    display:none;
}

@-webkit-keyframes anim{
    from { color:red;}
    50%{color:green;font-size:8em;}
    to{color:blue;}
}
@-moz-keyframes anim{
    from { color:red;}
    50%{color:green;font-size:8em;}
    to{color:blue;}
}
@-ms-keyframes anim{
    from { color:red;}
    50%{color:green;font-size:8em;}
    to{color:blue;}
}