css揭秘 – 过渡与动画（三）

这是我参与更文挑战的第17天，活动详情查看： 更文挑战

沿环形路径平移的动画

难题

有没有一种办法用 CSS 动画来让一个元素沿着环形路径动起来。讨论一个简单的例子，让一幅头像图片沿着环形路径动起来。代码结构：

<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>
复制代码

给其添加动画：

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 100px;
  /* 100px = 路径的半径 */
}
复制代码

看到这个动画，它不仅让头像沿着环形路径转动，同时还会让头像自身旋转。如果有文字的话，那文字也会是颠倒的。我们希望它只是沿着环形进行移动，同时保持自己本来的朝向。

需要两个元素的解决方案

思路：用内层的变形来抵消外层的变形效果，这次的抵消作用是贯穿于整个动画的每一帧的。因此，需要两层元素，代码结构修改为：

<div class="path">
  <div class="avatar">
    <img src="lea.jpg" />
  </div>
复制代码

将原先的动画应用在 .avatar 这个容器上，对头像元素设置另一个旋转动画，让它以相反的方向自转一周，就会看到这两层旋转的作用会在头像上相互抵消，就只会看到父元素旋转所产生的环绕动作。只需把头像的动画设置为相反的角度范围（ 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 = 路径的半径 */
}

.avatar>img {
  animation: spin-reverse 3s infinite linear;
}
复制代码

第一次优化，让内层动画从父元素那里继承所有的动画属性，然后把动画名覆盖掉。

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(1turn);
  }
}

.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px;
  /* 150px = 路径的半径 */
}

.avatar>img {
  animation: inherit;
  animation-name: spin-reverse;
}
复制代码

第二次优化，使用 animation-direction 属性中的 reverse 值，得到原始动画的反向版本，这样就可以利用一套关键帧实现两套旋转动画：

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px;
  /* 150px = 路径的半径 */
}

.avatar>img {
  animation: inherit;
  animation-direction: reverse;
}
复制代码

单个元素的解决方案

<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>
复制代码

至此，css 揭秘的所有内容均已完毕，对齐内容做如下归纳总结：

END！

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。