CSS Wobble动画

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); } }

Answer 1

实际上它正在工作，但是由于它是一个球体，所以您看不到它在旋转，请删除border-radius来查看它。还可以使用“替代”效果更好

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

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