CSS动画循环来回运动|极客教程

CSS动画循环来回运动

在网页设计和开发中，动画效果是一个很重要的部分，能够吸引用户的注意力，增强用户体验。CSS 动画是一种在不需要使用JavaScript的情况下实现动画效果的方法。其中，循环来回运动的动画效果常常被应用在广告、产品展示等场景中。本文将详细介绍如何利用CSS动画实现一个简单的循环来回运动效果。

CSS动画原理

在CSS中，通过@keyframes关键字可以创建一个动画序列。@keyframes规则包含至少一个百分比值，每个百分比值对应动画在整个持续时间内的一个状态。

在定义好@keyframes规则之后，可以通过animation属性将它应用到元素上。animation属性需要至少指定动画的名称、持续时间和运动曲线等信息。

实现循环来回运动动画

下面我们将详细介绍如何使用CSS动画实现一个循环来回运动的效果。

HTML结构

首先，我们需要在HTML中定义一个用于展示动画效果的元素。在本例中，我们使用一个<div>元素作为容器。

<div class="box"></div>

CSS样式

接下来，我们使用CSS为这个<div>元素添加样式，并定义动画效果。

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 2s infinite;
}

@keyframes move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(0);
    }
}

在以上代码中，我们定义了一个.box类，设置了宽度、高度和背景颜色，并为其添加了一个名为move的动画。这个动画在0%、50%和100%处分别定义了元素在X轴上的位移，实现来回运动的效果。infinite关键字表示动画将无限循环播放。