为什么我使用 CSS3 @keyframes 的上滑动画不起作用？

CSS3 过渡 - 淡出效果

使用 CSS3，您可以轻松实现淡出效果以增强用户体验。但是，如果您遇到幻灯片动画不起作用的问题，让我们探讨一下原因。

了解问题

您正在尝试创建上滑动画使用@关键帧。然而，动画并没有发生。为了调试这个问题，我们将深入研究您提供的代码。

<code class="css">.dummy-wrap {
  animation: slideup 2s;
}</code>

此代码指示 .dummy-wrap 类应执行 2 秒的上滑动画。 @keyframes 块定义动画的运动：

<code class="css">@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}</code>

幻灯片动画故障排除

检查关键帧，我们注意到元素的位置仅在最后 25 个中发生变化动画的%。由于元素从顶部开始：0px；并在顶部：-20px; 结束，它实际上会立即移动到顶部：-20px;，从而产生突然的“向上滑动”效果。

淡出的替代解决方案

您可以使用不透明度来实现淡出效果，而不是使用翻译。实现方法如下：

<code class="css">.hidden {
  opacity: 0;
  transition: opacity 2s;
}</code>

此技术逐渐降低元素的不透明度，在 2 秒内创建可见的淡出效果。

其他详细信息

在代码的初始版本中，突然的“向上滑动”效果是由于元素的位置仅在动画的最后 25% 中被修改。通过切换到不透明度并在整个持续时间内进行过渡，我们实现了平滑的淡出效果。

以上是为什么我使用 CSS3 @keyframes 的上滑动画不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！