如何构建从左侧滑入的 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中文网其他相关文章！