JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span></span>
</div>

CSS

div {
    background:silver;
    height: 100px;
    width: 100px;
    position:relative;
    text-align: center;
}
span {
    display:block;
    width: 20px;
    height:20px;
    background-color:red;
    position:absolute;
    top:50%;
    margin: 0 auto;
    left: 0;
    right: 0;
    
    transform:translateY(-50%);
    
    animation-name: rotate;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes rotate {
    0% {
        transform: translateY(-50%) rotate(0deg); 
    }
    100% {
        transform: translateY(-50%) rotate(45deg);
    }
}