JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c1"></div>

<div class="c2"></div>

CSS

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    background: #888;
    position: relative;
}
div::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: red;
    position: absolute;
    top: 48px;
    left: 48px;
}

.c1 {
    animation: foo1 3s linear forwards;
}
.c2 {
    animation: foo2 3s linear forwards;
}

@keyframes foo1 {
 to {
   /*         3rd           2nd              1st      */
   transform: rotate(90deg) translateX(30px) scale(1.5);
 }
}

@keyframes foo2 {
 to {
   /*         3rd           2nd              1st      */
   transform: translateX(30px) rotate(90deg) scale(1.5);
 }
}