启用和禁用动画

Kirupa 提供了一个详细的教程，介绍了如何提供一个具有持久选项的用户界面，用于控制动画是否运行。

技巧在于控制移动的自定义属性

body {
  --toggle: 0;
  --playState: "paused";
}

它们用于动画和过渡中

.animation {
  animation: bobble 2s infinite;
  animation-play-state: var(--playState);
}

.transition {
  transition: transform calc(var(--toggle) * .15s) ease-in-out;
}

并且可以通过 JavaScript 切换

// stop animation
document.body.style.setProperty("--toggle", "0");
document.body.style.setProperty("--playState", "paused");

// play animation
document.body.style.setProperty("--toggle", "1");
document.body.style.setProperty("--playState", "running");

然后深入使用媒体查询来测试是否已禁用减少运动，并将首选值存储在 localStorage 中。

直接链接 →