Skip to content Skip to sidebar Skip to footer

Left And Top Properties Are Not Animated

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

Solution 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);
  }
}
<div class="element-animation"></div>

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


Solution 2:

You should copy all the code for every Browser. not just standard.

so it should contain the following stuff

-webkit-animation: animationFrames linear 0.7s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: ;

see in http://jsfiddle.net/KxM68/8/


Post a Comment for "Left And Top Properties Are Not Animated"