Using CSS3 to make an arm image wave, almost cracked it but stuck

Question

wondering if someone could help me with making this animation slightly better, it rotates of course at -30degrees but its it possible to rotate it like that but the start of the arm to not rotate as well so it looks more like an arm waving?

.santas-arm {
    animation: wavingArm 2s ease-in-out infinite;
    top: 100px;
    left: 100px;
    position: relative;
    background: black;
    width: 200px;
    height: 50px;
}

@keyframes wavingArm {
	0% { 
		transform: rotate(0deg) translate(0px);
	}
	50% { 
		transform: rotate(-30deg) translate(0px);
	}
	100% { 
		transform: rotate(0deg) translate(0px);
	}
}

<div class="santas-arm"></div>

Answer 1

It's just a matter of setting the transform-origin:

   transform-origin: left center

MDN reference:

The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

---

.santas-arm {
  animation: wavingArm 2s ease-in-out infinite;
  top: 100px;
  left: 100px;
  position: relative;
  background: black;
  width: 200px;
  height: 50px;
  transform-origin: left center;
}
@keyframes wavingArm {
  0% {
    transform: rotate(0deg) translate(0px);
  }
  50% {
    transform: rotate(-30deg) translate(0px);
  }
  100% {
    transform: rotate(0deg) translate(0px);
  }
}

<div class="santas-arm"></div>