使用CSS3制作手臂图像波形，几乎使其破裂，但卡住了

想知道是否有人能帮我把这个动画做得稍微好一点，它当然会旋转-30度，但是它可以像那样旋转，但是手臂的开始部分没有旋转，所以看起来更像是手臂摆动

。圣诞老人手臂{
动画：wavingArm 2s轻松输入输出无限；
顶部：100px；
左：100px；
位置：相对位置；
背景：黑色；
宽度：200px；
高度：50px；
}
@关键帧wavingArm{
0% { 
变换：旋转（0度）平移（0像素）；
}
50% { 
变换：旋转（-30度）平移（0px）；
}
100% { 
变换：旋转（0度）平移（0像素）；
}
}

---

只需设置

变换原点即可：

   transform-origin: left center

:

使用“变换原点”特性可以修改对象的原点
元素的变换。例如，的变换原点
函数的作用是旋转的中心。（该物业为
通过首先将元素转换为
属性，然后应用元素的变换，然后通过
属性值。）



。圣诞老人手臂{
动画：wavingArm 2s轻松输入输出无限；
顶部：100px；
左：100px；
位置：相对位置；
背景：黑色；
宽度：200px；
高度：50px；
变换原点：左中心；
}
@关键帧wavingArm{
0% {
变换：旋转（0度）平移（0像素）；
}
50% {
变换：旋转（-30度）平移（0px）；
}
100% {
变换：旋转（0度）平移（0像素）；
}
}
使用
变换原点
（）
。圣诞老人手臂{
动画：wavingArm 2s轻松输入输出无限；
顶部：100px；
左：100px；
位置：相对位置；
背景：黑色；
宽度：200px；
高度：50px；
}
@关键帧wavingArm{
0% { 
变换：旋转（0度）平移（0像素）；
变换原点：0%0%
}
50% { 
变换：旋转（-30度）平移（0px）；
变换原点：0%0%
}
100% { 
变换：旋转（0度）平移（0像素）；
变换原点：0%0%
}
}
给我几分钟，我会看看我能做些什么。你一定错过了什么，因为我得到的只是一个黑色矩形。是的，我只是在中添加了一个例子，因为手臂的图像不是托管在任何地方，而是或多或少的形状。好吧，我找到了它没有动画的原因，您可能需要在每个
关键帧%
的开头添加
-webkit-
。啊，是的，grunt为我添加了所有这些，应该在示例中添加这些，对不起！