如何建立從左側滑入的 CSS 過渡？

如何從左側創建 CSS 滑入過渡

在 CSS 中，實現從左側滑入過渡需要利用 CSS3 過渡或動畫。以下是實現它的方法：

使用CSS3 過渡和懸停（演示一）

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

此程式碼片段從左側平滑過渡元素的位置：-100px；懸停時1 秒內變為0。您也可以使用transform:translate()來調整元素的位置。

使用CSS3動畫（演示二）

#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秒後自動啟動具有動畫延遲屬性。將animation-fill-mode 設為forwards 可在動畫結束後保留元素的可見性。

瀏覽器支援

有關 CSS 過渡和動畫的瀏覽器相容性的詳細信息，請參閱 caniuse.com。

進一步閱讀

有關這些技術的更深入的知識，探索：

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

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