当动画元素具有'display: none;”时，如何在 CSS 中创建滑动动画？

与显示结合的 CSS 动画：无

您希望创建一个 CSS 动画，其中“main-div”在指定的持续时间，按下其路径中的其他 div。但是，将“main-div”的“display”属性设置为“none”会阻止动画触发。

要克服此限制，您不能直接在“display: none;”之间设置动画。和“显示：阻止；”或“高度：0;”之间和“高度：自动”。相反，您必须手动指定 div 的高度。

这是使用 vanilla CSS 的示例：

#main-image {
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

在此代码中，我们显式设置“主图像”的高度div 最初为 0 像素，有效地隐藏它。 “溢出：隐藏；”属性可防止任何内容溢出指定高度。

然后，我们使用 CSS 动画从初始高度 0 平滑过渡到所需高度 300px。 “animation-delay”属性确保动画在 3.5 秒延迟后开始。

使用这种方法，您可以创建滑动动画，而无需使用“display: none;”同时保持 CSS 提供的平滑过渡和精确计时。

以上是当动画元素具有'display: none;”时，如何在 CSS 中创建滑动动画？的详细内容。更多信息请关注PHP中文网其他相关文章！