如何僅使用 CSS 建立滑入過渡？

如何使用純 CSS 添加滑入過渡

在網頁設計中，創建具有視覺吸引力的過渡可以增強用戶體驗。一種流行的效果是滑入過渡，其中元素在觸發時從螢幕外移動到其所需位置。本教學探討如何使用 CSS 實現此效果，而不需要 JavaScript。

選項 1：CSS 過渡（懸停時）

CSS 過渡可讓您順利地在指定的持續時間內變換元素的屬性。以下是在懸停時創建滑入過渡的範例：

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

選項2：CSS 動畫

CSS 動畫提供更多對過渡的控制，使您能夠指定開始和結束時間。以下是使用動畫的範例：

#slide {
    left: -100px;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@keyframes slide {
    100% { left: 0; }
}

瀏覽器支援和資源

有關瀏覽器相容性，請參閱以下連結：

• CSS 轉場：https://caniuse.com/transitions
• CSS 動畫： https://caniuse.com/animations

其他資源

要了解有關CSS 動畫和過渡的更多信息，請查看以下Mozilla 開發者網路(MDN) ) 文章：

• 動畫： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
• 過渡：https://developer.mozilla.org/en-US/docs/Web/Guide /CSS/Using_CSS_transitions

以上是如何僅使用 CSS 建立滑入過渡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！