css左右摇摆动画

可以使用CSS3的@keyframes和transform属性来创建左右摇摆动画。以下是一个简单的示例代码：

/* 定义动画 */
@keyframes sway {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 应用动画 */
.element {
  animation: sway 2s ease-in-out infinite;
}

这段代码会让元素左右来回摇摆，每次摇摆的时间为2秒，摇摆的距离为20像素。你可以根据需要调整这些值。

相关问题

写一个css 动画 金蛋放大缩小左右摇摆

可以使用CSS3的动画来实现这个效果。下面是一个简单的实现：

<div class="egg"></div>

.egg {
  position: relative;
  width: 50px;
  height: 70px;
  background-color: #f7d794;
  border-radius: 50% 50% 0 0;
  animation: shake 2s ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(-10px) scale(1.2);
  }
  50% {
    transform: translateX(0) scale(1);
  }
  75% {
    transform: translateX(10px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

解释一下这个代码：

首先，我们创建了一个div元素，并给它添加一个类名“egg”。

然后，我们给这个类添加了一些样式。我们使用了相对定位，以便我们可以在其中放置其他元素（例如金蛋）。我们还设置了元素的宽度、高度、背景颜色和边框半径，以使其看起来像一个金蛋。

最重要的是动画。我们使用了CSS3的动画功能，定义了一个名为“shake”的动画。这个动画将在2秒内无限循环播放，使用了“ease-in-out”缓动函数，这意味着动画将以慢速开始、快速结束，并在中间放慢速度，以产生更自然的效果。

动画定义了5个关键帧，每个关键帧都定义了元素的变换（transform）。在第一帧中，元素将不做任何变换（即不缩放、不移动）。在第二个关键帧中，元素将向左移动10像素，并缩放1.2倍。在第三个关键帧中，元素将回到原来的位置和大小。接着，在第四个关键帧中，元素将向右移动10像素，并再次缩放1.2倍。最后，在第五个关键帧中，元素将回到原来的位置和大小。

这些关键帧的变换产生了一个看起来像是金蛋在左右摇晃的效果。