JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="box">
<label for="box"></label>

CSS

label {
display: block;
    width: 100px;
    height: 100px;
    background-color: red;
    
    -web-transition:    height 0.5s;
    -web-transition-delay:    0.5s;
    transition:        height 0.5s;
    animation-delay:    0.5s;
    
    animation-name: aabningstider;
    animation-duration: 2.0s;
    animation-iteration-count: infinite;

    -web-animation-name: aabningstider;
    -web-animation-duration: 2.0s;
    -web-animation-iteration-count: infinite;

}

@keyframes aabningstider {
    0% { transform: scaleY(1); }
    10% { transform: scaleY(1.1) translateY(5%); }
    20% { transform: scaleY(1); }
}

@-webkit-keyframes aabningstider {
    0% { transform: scaleY(1); }
    10% { transform: scaleY(1.1) translateY(5%); }
    20% { transform: scaleY(1); }
}

#box:checked + label {
    animation-name: none;
    height: 210px;
}