<div class="transition-box">
</div>
.transition-box {
/* Regular Styles */
height: 80px;
width: 80px;
display: grid;
place-items: center;
background: #A35700;
border-radius: 12px;
transform: rotate(0deg) translateX(0);
/* Animation Styles */
animation: cssnmotion 3s ease-in-out infinite;
}
@keyframes cssnmotion {
0% {
transform: rotate(0deg) translateX(0px);
border-radius: 12px;
}
33% {
transform: rotate(360deg);
border-radius: 40px;
}
66% {
transform: rotate(0deg) translateX(150px);
border-radius: 40px;
}
100% {
transform: rotate(0deg);
border-radius: 12px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.