使用transform属性不工作的多个CSS关键帧动画 [英] Multiple CSS keyframe animations using transform property not working

问题描述

使用 CSS关键帧动画时，我发现当我给一个元素两个动画：

  .element {
 animation：animate1 1000ms linear infinite，
 animate2 3000ms linear infinite; 
} 
  

如果两个动画都使用 / code>属性只有最后一个触发器通过级联。但是如果 @keyframes 动画让一个 margin 或显示或某些其他 css 属性，而其他使用 transform

这里是一个代码示例以下相关代码。

CSS

  @keyframes move {
 0％，100％{transform：translateX（0px）; } 
 50％{transform：translateX（50px）; } 
} 
 @keyframes skew {
 0％，100％{transform：skewX（0deg）; } 
 50％{transform：skewX（15deg）; } 
} 
 @keyframes opacity {
 0％，100％{opacity：1; } 
 50％{opacity：.25; } 
} 
 
 .taco {
 animation：skew 2000ms线性无穷大，
不透明度4000ms线性无限; 
} 
  

在上面它们都触发

  .burger {
 animation：skew 2000ms线性无限，
移动4000ms线性无穷; 
} 
  

在上面只有最后一个触发器 或者这是东西，只是不工作？例子很简单，我知道我可以将动画合并成一个，而不必声明两者，但这是一个更复杂的动画我正在工作的测试。

感谢

解决方案

您不能在同一元素上多次对同一个属性将覆盖其他，

您应该将您的目标元素放入一个div，并应用一个变换动画的div和其他transform-animation目标元素...

  .div_class 
 {
 animation：animate1 1000ms linear infinite; 
} 
 
 .element 
 {
 animation：animate2 3000ms linear infinite; 
} 
  

While working with CSS keyframe animations I found that when I give an element two animations like:

.element {
    animation: animate1 1000ms linear infinite,
               animate2 3000ms linear infinite;
}

If both of the animations animate using the transform property only the last one triggers through cascading. But if the @keyframes animations are lets say one margin or display or some other css attribute and the other uses transform then they both trigger.

here is a codepen example with the relevant code below.

CSS

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.taco {
    animation: skew 2000ms linear infinite,
               opacity 4000ms linear infinite;
}

In the Above they both trigger

.burger {
    animation: skew 2000ms linear infinite,
               move 4000ms linear infinite;
}

In the above only the last triggers (through cascading)- why?

Anyone have a solution for this without using js? Or is this something that just doesn't work? The example is quite simple and I know that I could combine the animations into one and not have to declare both but this was a test for a more complex animation I was working on.

thanks

解决方案

You cannot animate same attribute ( here transform attribute ) more than once, on a same element, the last one will overwrite other,

You should put your target element into a div, and apply one transform-animation on the div and other transform-animation on the target element....

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

这篇关于使用transform属性不工作的多个CSS关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！