DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

Orbit animation css

 <div class="body">
  <div class="box">
    <div class="item"></div>
  </div>
</div> 
Enter fullscreen mode Exit fullscreen mode
.container {
    width: 100%;
    height: 100vh;
    border: 1px dashed red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 400px;
    height: 400px;
    border: 2px solid greenyellow;
    border-radius: 50%;
    animation: loop 5s linear infinite;
}
.item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid yellow;
    background: goldenrod;
}

@keyframes loop {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)