[分享]css3动画让div元素横向左右来回动

今天，我们来学习一下如何使用 CSS3 动画让一个 div 元素横向左右来回动。

/* 首先，我们需要为 div 元素设置 CSS 样式 */
div {
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
}

/* 接着，我们为 div 元素设置动画效果 */
div {
  animation: move 2s ease-in-out infinite;
}

/* 最后，我们定义动画的关键帧 */
@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 300px;
  }
  100% {
    left: 0;
  }
} 

上述代码中，我们首先给 div 元素设置了宽度、高度和背景颜色，同时将其定位为相对定位。

接着，我们使用 animation 属性为 div 元素设置了一个名为 move 的动画，它具有以下属性：

• 持续时间为 2 秒

• 缓动方式为 ease-in-out

• 无限循环

最后，我们使用 @keyframes 关键字定义了动画的关键帧，即动画从开始到结束的过程中需要经过的关键点。在这里，我们定义了三个关键点：

• 0% ： div 元素位于最左边

• 50% ： div 元素位于最右边

• 100% ： div 元素又回到了最左边

这样，我们就实现了一个横向左右来回动的 div 元素。