css - CSS 摆动动画

Question

我正在尝试在 div id 上创建一个连续的摆动动画，但它对我不起作用。任何帮助将不胜感激。

这是我的代码：

.figure {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: rgb(23, 147, 219);
  padding: 40px;
  box-shadow: inset -5px -15px rgba(0, 0, 0, .06);
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 50%;
  animation: wobble 5s ease-in-out infinite;
  transform-origin: center bottom;
  transition: padding .3s, bottom .3s;
  text-align: center;
}

@keyframes wobble {
  33% {
    transform: rotate(5deg);
  }
  66% {
    transform: rotate(-5deg);
  }
}

<div class="figure" ></div>

Answer 1

实际上它正在工作，但是由于它是一个球体，您无法注意到它在旋转，因此请移除border-radius以查看它。也可以使用alternate看到更好的效果

animation:wobble 5s ease-in-out infinite alternate;

也使用 0% 到 100% 动画以获得更好的效果。