在 CSS 中从左过渡滑入

Jay Singh 2023年2月20日 2022年4月20日

CSS CSS Transition

为过渡和动画创建行为是 CSS3 的创新之一。多年来，前端开发人员一直在请求使用 HTML 和 CSS 而不是 JavaScript 或 Flash 构建这些交互的选项。

当元素的状态发生变化时，例如悬停、聚焦、活动或目标，你可以使用 CSS3 过渡来修改其外观和行为。

CSS3 动画允许你在众多关键帧中更改元素的外观和行为。过渡允许你从一种状态转到另一种状态，而动画基于不同的关键帧建立许多过渡点。

我们将在本文中从左侧过渡示例中查看 CSS 滑入。

在 CSS 中从左过渡滑入

此示例使用 translateX 和 translateY 将元素从 A 点移动到 B。translate 函数可让你在平面上移动元素（x 轴和 y 轴）。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Slide-in Transition</title>
    </head>
    <style>
        .element {
            width: 200px;
            height: 200px;
            background: blue;
            animation: moveToRight 1s ease-in-out;
            animation-delay: 10ms;
        }

        @keyframes moveToRight {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(500px);
            }
        }
    </style>
    <body>
        <div class="element"></div>
    </body>
</html>

在 CSS 中从左过渡滑入

相关文章 - CSS Transition