當動畫元素具有「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中文網其他相關文章！