CODEWITHSUNDEEP
htmlcss
Thor The dog
Thor The dog

Reputation: 45

how to animate elements to move in a circular path using CSS

I want my element, which is a text, to move in a circular path. I need to use CSS for this. I am attaching my code for the same. The error I face is I need to translate my element to the circumference of the circle. This causes the text to jump to the circumference at the start and the end of the animation. How do I solve this? Is there another method to animate objects to move in a circular direction?

.element{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%); 
animation: orbit2 4s forwards;
}


@-webkit-keyframes orbit2 {
    from {  -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div class= "element">
<a>NEN</a>
</div>

Upvotes: 1

Views: 3819

Answers (1)

granite
granite

Reputation: 372

Something like this (or can even change the way the text wraps around the circle):

#spin {
  position:absolute;
  top:25%;
  left:50%;
  margin:50px;
  animation: orbit 4s forwards infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes orbit {
    from {  -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div id="spin"><p>text</p></div>

Upvotes: 7

Related Questions