CODEWITHSUNDEEP
htmlcsscss-animations
Thor The dog
Thor The dog

Reputation: 55

circular animation using CSS

I'm trying to create an animation for a three-letter word. For now, take the word XYZ. The idea is that each letter of XYZ will move in a circular path of different radii and directions (Like one letter moving right, another left, and bottom) before coming back to the original position. I have tried using different forms of code for this but am failing because I don't clearly understand how to animate circular motion with a fixed origin. Will be helpful if anyone could share how to do this. I am also attaching part of my code

.animation-container {
  display: flex;
  position: relative;
  top: 10rem;
  left: 50%;
  align-items: center;
  text-align: center;
}

.letter {
  animation: move-letter 4s ease-in-out infinite;
  animation-iteration-count: infinite;
}

@keyframes move-letter {
  from {
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}
<div class="animation-container">
  <div class="letter X">X</div>
  <div class="letter Y">Y</div>
  <div class="letter Z">Z</div>
</div>

Upvotes: 0

Views: 2524

Answers (1)

Johannes
Johannes

Reputation: 67798

It depends what you actually want, but you definitely need three different animations (i.e. with different settings), and 3 or more stages per animation, returning to the first position in each case:

.animation-container {
  display: flex;
  position: relative;
  top: 10rem;
  left: 50%;
  align-items: center;
  text-align: center;
}

.letter.X {
  animation: move-letter_x 4s ease-in-out infinite;
  animation-iteration-count: infinite;
}
.letter.Y {
  animation: move-letter_y 4s ease-in-out infinite;
  animation-iteration-count: infinite;
}
.letter.Z {
  animation: move-letter_z 4s ease-in-out infinite;
  animation-iteration-count: infinite;
}


@keyframes move-letter_x {
  0% {
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
}
@keyframes move-letter_y {
  0% {
    -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
  50% {
    -webkit-transform: rotate(0deg) translateX(80px) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}
@keyframes move-letter_z {
  0% {
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg) translateX(140px) rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
  }  
}
<div class="animation-container">
  <div class="letter X">X</div>
  <div class="letter Y">Y</div>
  <div class="letter Z">Z</div>
</div>

Upvotes: 1

Related Questions