JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="item1">
        <div class="element"></div>
    </div>
    <div class="item2">
        <div class="element"></div>
    </div>
</body>

CSS

.item1, .item2 {
    width: 200px;
    height: 200px;
    float: left;
    border-radius: 100px;
    overflow: hidden;
}
.item1 + .item2 { margin-left: 100px; }
.item1 { background: #505d73; }
.item2 { background: #77b4d6; }
.item1 .element {
    position: relative;
    top: 50%;
    margin: -50px auto 0;
    background: #eee;
    width: 100px;
    height: 100px;
    -webkit-animation: rotate 5s;
    animation: rotate 5s;
}
/* @-webkit-keyframes rotate {
    to { transform: rotate(360deg); }
}
@keyframes rotate {
    to { transform: rotate(360deg); }
} */
.item2 .element {
    background: #000;
    position: relative;
    top: 50%;
    margin: -50px auto 0;
    width: 100px;
    height: 100px;
    -webkit-animation: slide 5s;
    animation: slide 5s;
}
@-webkit-keyframes slide {
    0% { margin-left: -100px; }
    100% { margin-left: 50px; }
}
@keyframes slide {
    0% { margin-left: -100px; }
    100% { margin-left: 50px; }
}