CSS 动画指南 - 第 3 部分

CSS 变量

弯曲的动画路径

JavaScript 钩子

你真的需要 CSS 动画吗？

就这样！🎉

让我们做一些很酷的事情😎

如果你已经读到这里，那么你现在应该已经掌握了 CSS 动画的所有内容了。给自己鼓鼓劲儿吧🙌

这最后一部分不会很长，但我不想把它塞进其他部分。在这一部分，我们将探讨一些额外的主题👍 虽然内容比较杂乱，但还是有一些值得思考和了解的地方。

与第一部分和第二部分一样，所有代码都可以在 CodePen 中找到。这让你可以随时尝试这些代码 🎾

CSS 变量

CSS 变量很棒。但我们还不能为它们的值添加动画效果。那么我们能用它们做什么呢？我们可以用它们的值来创建动态动画。

举个例子，我们有三个正方形。我们想让它们分别以不同的比例缩放。我们需要三个不同的动画吗？我们可以将animation-fill-mode backwards它们都设置为相同的初始大小并进行缩放吗？但是我们知道它们的初始大小吗？使用 CSS 变量，我们可以让动画动态化。

下面的代码怎么样

div {
  animation: change 0.5s cubic-bezier(1, 0.2, 0.6, 1.75) 1s forwards;
}
div:nth-of-type(1) {
  --scale: 1.2;
}
div:nth-of-type(2) {
  --scale: 2.6;
}
div:nth-of-type(3) {
  --scale: 1.8;
}
@keyframes change {
  to {
    transform: scale(var(--scale));
  }
}

以前，你无法通过修改 CSS 变量值来在运行时更新动画。在这种情况下，一个技巧就是将动画颠倒过来。请考虑以下示例。

但是，现在动画确实会响应 CSS 变量的变化。最近我发了一条推文。

包含此演示。

在这个演示中，我们实际上通过改变 CSS 变量的值来在运行时更新动画值😲

弯曲的动画路径

因此，我们可以为元素从一个点到另一个点设置动画，但是如何为动画路径添加曲线呢？

让我们从一个简单的例子开始，我们希望元素从一个点移动到另一个点，但获得一些空中时间。

div {
  animation: throw 2s ease 1s both;
}
@keyframes throw {
  0% {
    transform: translate(-25vw, 0);
  }
  50% {
    transform: translate(0, -20vh);
  }
  100% {
    transform: translate(25vw, 0);
  }
}

看起来不错。但没用。我们会得到类似这样的结果

那么我们该如何解决这个问题呢？我们需要两个动画和两个元素。包装元素负责处理 X 轴。实际元素负责处理 Y 轴。

.wrapper {
  animation: x 2s ease-in-out infinite 1s both;
}

.wrapper > div {
  animation: y 2s ease-in-out infinite 1s both;
}

@keyframes x {
  0% {
    transform: translate(-25vw, 0);
  }
  100% {
    transform: translate(25vw, 0)
  }
}

@keyframes y {
  50% {
    transform: translate(0, -20vh);
  }
}

甜🍭

你可以用这个技术组装一个小加载器🐛

还有另一种沿曲线路径实现 CSS 动画的技术。如果你熟悉 SVG 路径符号，不妨了解一下👍 虽然支持效果尚不理想，但文档可以在这里找到。

JavaScript 钩子

那么，如果我们需要在 JavaScript 中知道动画何时结束怎么办？别担心。我们可以关联一些事件。

• animationiteration- 每次动画迭代后触发
• animationend- 动画完成后触发
• animationstart- 在动画开始时触发

这些钩子非常强大，可以让我们做一些很酷的事情。想象一下一个无限旋转的元素。animationiteration例如，我们可以用它来追踪元素的 span 次数。

const spinner = document.querySelector('div')
const label = document.querySelector('h1')
let span = 0
const update = () => {
  span++
  label.innerText = `Span ${span} times!`
}
spinner.addEventListener('animationiteration', update)

当你开始连接动画事件时，有很多可能性。你甚至可以制作一个无限的动画，但带有随机的延迟。

你真的需要 CSS 动画吗？

如果你已经读到这里，我们几乎已经了解了关于 CSS 动画的所有知识。

这可能看起来有点奇怪，但你真的需要 CSS 动画吗？😕

听我说。CSS 动画很棒。但是一旦动画变得复杂，维护起来就会变得困难。

你可以利用 JavaScript 钩子来更好地管理。但是，如果你开始开发复杂的时间线，就不要再重复造轮子了。市面上有很多很棒的动画辅助工具。我强烈推荐GreenSock (GSAP)。它非常出色，可以从侧面完全控制你的动画JavaScript。

那么，为什么要学习 CSS 动画呢？！CSS 动画仍然有其用武之地。你可以用它做很多事情。而且你可能无法总是依赖它JavaScript。尤其是在用户在浏览器中禁用了动画的情况下。考虑一些可以制作动画的简单元素，例如加载旋转器和微交互。这些仍然有助于提升用户体验。

就这样！🎉

如果您已经读到这里，非常感谢您的关注！

现在你应该已经准备好开始行动了📽如果你有任何不清楚的地方，或者觉得需要更好的解释，请随时联系我们。我非常期待你的反馈👍

所有演示均可在以下 CodePen 集合中找到👍

一如既往，如果您有任何问题或建议，请随时留言或发推文给我🐦！记得在社交媒体上与我联系！😎