Question

在下面的动画中，变换是正确动画的，但左侧和顶部属性不是。这是为什么？

.element-animation {
  background-color: yellow;
  width: 30px;
  height: 30px;
  animation: animationFrames ease 2s;
  animation-iteration-count: infinite;
}
@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(2) scaleY(2) skewX(45deg) skewY(45deg);
  }
}

<div class="element-animation"></div>

Answer 1

您的动画依赖于定位，因此您必须添加position属性：

.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>

对于旧版浏览器，您可能需要为动画属性添加-webkit-前缀。检查浏览器兼容性over on caniuse.com

Answer 2

您应该复制每个浏览器的所有代码。不只是标准。

所以它应该包含以下内容

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

见http://jsfiddle.net/KxM68/8/

left和top属性不是动画

2 个答案: