CSS动画左到右移动|极客教程

CSS动画左到右移动

在网页设计中，动画的应用是非常常见的，它能够吸引用户的注意力，增加页面的交互性。在这里我们将介绍如何利用CSS动画实现一个简单的左到右移动效果。

HTML结构

首先，我们需要一个HTML文件来构建页面的结构。在这个示例中，我们创建一个<div>元素，并给它一个唯一的ID用于CSS样式的引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="animation"></div>
</body>
</html>

CSS样式

接下来，我们需要创建一个CSS文件来定义动画效果。我们将使用@keyframes规则来定义一个从左到右移动的动画，并将其应用在我们之前创建的<div>元素上。

#animation {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
    top: 50%;
    left: 0;
    animation: moveRight 3s infinite;
}

@keyframes moveRight {
    from {
        left: 0;
    }
    to {
        left: calc(100% - 100px);
    }
}

在这段代码中，我们定义了一个名为moveRight的关键帧动画。它从左侧初始位置（left: 0;）开始，到达右侧边界位置（left: calc(100% - 100px);）结束。初始状态和结束状态之间的过渡会在3秒内完成，且会无限循环。