如何僅使用 CSS 建立跨瀏覽器滑入效果？

如何僅使用CSS 創建跨瀏覽器滑入過渡

使用CSS，您可以無縫滑入的元素從左開始創建，沒有JavaScript。這種多功能性可以透過 CSS3 轉場或 CSS3 動畫來實現。

CSS 過渡

例如，您可以實現懸停觸發的過渡：

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

在這種情況下，將滑鼠懸停在.wrapper 上將從左側滑動#slide：-100px；向左：0； 1 秒內。

CSS 動畫

或者，您可以使用動畫來自動實現滑入效果：

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

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

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

這種方法遵循相同的滑動機制，但它會在2 秒後自動開始動畫。動畫填滿模式：向前；屬性確保 div 在動畫完成後保持可見。

有關 CSS 動畫和過渡的更多信息，請參閱以下資源：

• 動畫：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中文網其他相關文章！