css左右摇摆动画

要实现CSS左右摇摆动画，可以使用CSS3中的@keyframes和animation属性。具体实现步骤如下：

1. 定义@keyframes，设置动画的开始和结束状态。例如，设置一个名为“swing”的@keyframes，将元素从左边倾斜到右边倾斜。

@keyframes swing {
  0% { transform: rotate(-20deg); }
  50% { transform: rotate(20deg); }
  100% { transform: rotate(-20deg); }
}

2. 在要应用动画的元素上设置animation属性，指定动画的名称、持续时间、循环次数等。例如，将一个class为“swing”元素进行左右摇摆动画，持续时间为2s，循环无限次。

.swing {
  animation: swing 2s infinite;
}

3. 最后，为了让动画效果更加流畅，可以使用transition属性添加过渡效果。

.swing {
  animation: swing 2s infinite;
  transition: transform 0.2s ease-in-out;
}

这样，当元素被悬停或者其他状态变化时，它会更加平滑地进行左右摇摆动画。

相关问题

写一个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倍。最后，在第五个关键帧中，元素将回到原来的位置和大小。

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

纯css实现 泰迪熊动画

可以使用CSS3中的动画属性来实现泰迪熊的动画效果。首先，需要准备一张泰迪熊的图片，然后将其作为背景图设置到一个div元素中，然后通过关键帧动画实现泰迪熊的动画效果。以下是实现泰迪熊摇摆的样例代码：

HTML代码：

<div class="teddy"></div>

CSS代码：

.teddy {
  width: 200px;
  height: 200px;
  background-image: url("teddy.png");
  background-size: contain;
  animation: swing 1s infinite alternate;
}

@keyframes swing {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(20deg);
  }
}

解释一下上面的代码：

- div元素的class为teddy，宽高为200px，背景图片为teddy.png；
- 动画名称为swing，1s为一次动画的时间，infinite为无限循环播放，alternate为动画来回播放；
- 在关键帧动画中，0%代表动画开始时的状态，100%代表动画结束时的状态，使用transform属性来实现泰迪熊的摇摆效果，rotateZ(0deg)代表不旋转，rotateZ(20deg)代表向右旋转20度。

你可以根据自己的需要调整动画效果的细节，例如旋转角度、动画时间等。