JSFiddle - React, Tailwind, and code Playground

HTML

This example of CSS Animations shows off responsive keyframes. Hovering the moving text updates its font-size causing the em specified keyframe values to recalculate.
<div id="example">
    <div id="normalText">Normal range</div><div id="normalRange"></div>
    <div id="animated">Hover me to change font-size.</div>
    <div id="hoverText">Hover range</div><div id="hoverRange"></div>
</div>

CSS

#example {
    position: relative;
}

@keyframes test {
    from { left: 1em; }
    to { left: 4em; }
}

#animated {
    position: absolute;
    top: 40px;
    animation: test 1s ease-in-out alternate infinite;
    height: 35px;
    font-size: 20px;
    border-left: solid 1px;
    color: blue;
}
#animated:hover {
    font-size: 30px;
    color: orange;
}

#normalText {
    position: absolute;
    top: 20px;
    color: blue;
}
#normalRange {
    position: absolute;
    top: 40px;
    left: 20px;
    width: 60px;
    border: blue solid 1px;
}

#hoverText {
    position: absolute;
    top: 80px;
    left: 25px;
    color: orange;
}
#hoverRange {
    position: absolute;
    left: 30px;
    top: 75px;
    width: 90px;
    border: orange solid 1px;
}