This is the 17th day of my participation in Gwen Challenge

Animation of panning along a circular path

problem

Is there a way to animate an element along a circular path using CSS? Discuss a simple example of moving a head picture along a circular path. Code structure:

<div class="path">
  <img src="111.jpg" class="avatar" />
</div>

<style>
.path {
  margin: 200px;
  width: 200px;
  height: 200px;
  padding: 20px;
  border-radius: 50%;
  background: #fb3;
}

.avatar {
  width: 50px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

img {
  display: block;
  width: inherit;
}
</style>
Copy the code

Animate it:

@keyframes spin {
  to {
    transform: rotate(1turn); }}.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 100px;
  /* 100px = path radius */
}
Copy the code

If you look at this animation, it not only makes the avatar move around the circular path, but it also makes the avatar rotate itself. If there were words, the words would be upside down. We want it to just move around the circle, but keep its orientation.

A two-element solution is required

Use the inner deformation to offset the outer deformation effect, this time the offset effect is throughout the entire animation frame. Therefore, two layers of elements are needed and the code structure is changed to:

<div class="path">
  <div class="avatar">
    <img src="lea.jpg" />
  </div>
Copy the code

Apply the original animation to the.avatar container, set another rotation animation on the avatar element, and make it rotate once in the opposite direction. You will see that the two layers of rotation cancel each other on the avatar, and you will see only the surrounding action caused by the rotation of the parent element. Simply set the animation of your avatar to the opposite Angle range (360-0deg) :

@keyframes spin {
  to {
    transform: rotate(1turn); }}@keyframes spin-reverse {
  from {
    transform: rotate(1turn); }}.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 100px;
  /* 150px = path radius */
}

.avatar>img {
  animation: spin-reverse 3s infinite linear;
}
Copy the code

The first optimization lets the inner animation inherit all animation properties from the parent element and then overwrites the animation name.

@keyframes spin {
  to {
    transform: rotate(1turn); }}@keyframes spin-reverse {
  from {
    transform: rotate(1turn); }}.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px;
  /* 150px = path radius */
}

.avatar>img {
  animation: inherit;
  animation-name: spin-reverse;
}
Copy the code

The second optimization uses the reverse value in the animation-direction property to get the reverse version of the original animation, so that two sets of rotation animations can be implemented using one set of keyframes:

@keyframes spin {
  to {
    transform: rotate(1turn); }}.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px;
  /* 150px = path radius */
}

.avatar>img {
  animation: inherit;
  animation-direction: reverse;
}
Copy the code

A single element solution

<div class="path">
  <img src="111.jpg" />
</div>
<style>
@keyframes spin {
  from {
    transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn)}to {
    transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn); }}.avatar {
  animation: spin 3s infinite linear;
}
</style>
Copy the code

At this point, all the content of CSS disclosure is completed, and the alignment content is summarized as follows:

The END!

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.