left and top properties are not animated

Question

In the animation below the transform is animated correctly, but the left and top properties are not. Why is this?

Answer 1

Your animation relies on positioning, therefore you have to add a position property:

.element-animation{
    position:relative;
}

.element-animation {
  background-color: yellow;
  width: 30px;
  height: 30px;
  animation: animationFrames ease 2s;
  animation-iteration-count: 1;
  position: relative;
}
@keyframes animationFrames {
  0% {
    left: 0px;
    top: 0px;
    opacity: 1;
    transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
  25% {
    left: 0px;
    top: -90px;
  }
  75% {
    left: 200px;
    top: -90px;
  }
  100% {
    left: 200px;
    top: 0px;
    opacity: 1;
    transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
  }
}

For older browsers you may need to add the -webkit- prefix for the animation property. Check browser compatibility over on caniuse.com