在 CSS 中從左過渡滑入

Jay Singh 2023年2月20日 2022年4月20日
在 CSS 中從左過渡滑入

為過渡和動畫建立行為是 CSS3 的創新之一。多年來,前端開發人員一直在請求使用 HTML 和 CSS 而不是 JavaScript 或 Flash 構建這些互動的選項。

當元素的狀態發生變化時,例如懸停、聚焦、活動或目標,你可以使用 CSS3 過渡來修改其外觀和行為。

CSS3 動畫允許你在眾多關鍵幀中更改元素的外觀和行為。過渡允許你從一種狀態轉到另一種狀態,而動畫基於不同的關鍵幀建立許多過渡點。

我們將在本文中從左側過渡示例中檢視 CSS 滑入。

在 CSS 中從左過渡滑入

此示例使用 translateXtranslateY 將元素從 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 Transition