左侧和顶部属性不是动画 [英] left and top properties are not animated

问题描述

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

  .element-animation {background-color：yellow; width：30px; height：30px;动画：animationFrames轻松2s; animation-iteration-count：infinite;} @ keyframes animationFrames {0％{left：0px; top：0px;不透明度：1;变换：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;不透明度：1;变换：rotate（0deg）scaleX（2）scaleY（2）skewX（45deg）skewY（45deg）; }}  

 < div class =element-animation < / div>  

解决方案>

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

  .element-animation {
 position：relative; 
} 
  

  .element-animation {background-color：yellow; width：30px; height：30px;动画：animationFrames轻松2s; animation-iteration-count：1; position：relative;} @ keyframes animationFrames {0％{left：0px; top：0px;不透明度：1;变换：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;不透明度：1;变换：rotate（0deg）scaleX（1）scaleY（1）skewX（0deg）skewY（0deg）; }}  

 < div class =element-animation < / div> 

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

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

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

解决方案

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

这篇关于左侧和顶部属性不是动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！