使用动画时，必须确保每个人都可以访问它们。根据 WCAG SC 2.2.2：暂停、停止、隐藏，用户必须能够暂停、停止或隐藏持续超过 5 秒的动画。让我们详细介绍一下如何使用 CSS 和 JavaScript 创建用户可以控制的动画。
我们将首先使用 CSS 关键帧创建一个简单的动画。该动画在屏幕上水平移动一个框。
<div class="animated-box"></div>
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: move 4s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}
</style>
接下来，我们介绍animation-play-state属性。该属性允许我们控制动画是运行还是暂停。我们使用 CSS 变量 --play-state 来设置动画的默认状态。
:root {
--play-state: running;
}
.animated-box {
animation-play-state: var(--play-state);
}
在这里，我们在根级别定义了一个 --play-state 变量，并将其初始值设置为 running。动画最初会运行，但这个变量为我们提供了稍后控制它的方法。
我们添加了一个按钮，允许用户通过更新 --play-state 变量来暂停/播放动画
<button id="toggle-btn">Pause Animation</button>
<script>
const toggleButton = document.getElementById('toggle-btn');
const root = document.documentElement;
toggleButton.addEventListener('click', () => {
const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();
if (currentPlayState === 'running') {
root.style.setProperty('--play-state', 'paused');
toggleButton.textContent = 'Resume Animation';
} else {
root.style.setProperty('--play-state', 'running');
toggleButton.textContent = 'Pause Animation';
}
});
</script>
我们使用 getCompulatedStyle 来获取 --play-state 变量的当前值。根据动画是运行还是暂停，我们切换值并相应地更新按钮的文本。
您可以在codepen上找到完整的工作示例
通过实施动画播放状态等简单的解决方案并提供动画控件，您可以帮助创建更具包容性的数字体验。
以上是使用动画播放状态暂停、停止和隐藏动画的详细内容。更多信息请关注PHP中文网其他相关文章！
