28

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

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

如果两个动画都使用该transform属性进行动画处理，则只有最后一个通过级联触发。但是，如果@keyframes动画是让我们说一个margin或display某个其他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 linear infinite,
               opacity 4000ms linear infinite;
}

在上面他们都触发

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

在上面只有最后一个触发器（通过级联） - 为什么？

任何人都可以在不使用的情况下解决此问题js？或者这是行不通的事情？这个例子非常简单，我知道我可以将动画合并为一个，而不必同时声明两者，但这是对我正在处理的更复杂动画的测试。

谢谢

4

3 回答 3

38

您不能在同一个元素上多次为同一属性（此处为 transform 属性）设置动画，最后一个将覆盖另一个，

您应该将目标元素放入 div 中，并在 div 上应用一个变换动画，在目标元素上应用另一个变换动画......

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

.element
{     
   animation:animate2 3000ms linear infinite;
}
于 2013-01-19T17:34:55.140 回答
9

出于同样的原因

transform: skewX(45deg);
transform: translateX(4em);

不会倾斜元素，只会移动它。如果你想倾斜和移动它，那么你需要链接它们transform: skewX(45deg) translateX(4em)

你必须做类似的事情

@keyframes t {
    25% { transform: skewX(15deg); }
    50% { transform: skewX(0deg) translateX(50px); }
    75% { transform: skewX(15deg); }
}

您不需要明确指定关键帧0%-100%它们会自动生成 - 请参阅CSS Animations 规范。

然后你可以使用

animation: t 4000ms linear infinite,
        opacity 4000ms linear infinite;

您应该注意的另一件事：skewX(angleValue) translateX(lengthValue) 恰好与translateX(lengthValue) skewX(angleValue). 但是，大多数情况下，应用转换的顺序很重要。skewX(angleValue) translateY(lengthValue)和会得到不同的结果translateY(lengthValue) skewX(angleValue)。

于 2013-01-17T18:56:50.180 回答
1

@StephanMuller 的 jsfiddle 几乎就是答案，该语法对我有用 http://jsfiddle.net/j83m5ha5/4

div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms  forwards, out 1s 2200ms forwards;
}

我相信 OP 已经提出了手头的问题，因为他想标准化他的动画并根据需要应用它们，从我的课程中获取这个最近的练习代码：https ://jsfiddle.net/kgLc56w4/

#b15{
top:200px;
left:200px;
background:#ff3399;
-webkit-animation: r4 ease-in-out 2s forwards 24s, s4 ease-in-out 2s forwards 30s;
}

每个块只在一个方向上移动，所以我没有做 15 个动画的繁重工作，而是使用了更简单的 8。我知道这可以做得更简单，但这不是练习的重点。

不过，我改变了什么，我在最后 15 个元素上使用了 Stephan 的语法再次移动它并且它起作用了。

你只需要注意时间，在斯蒂芬的例子中，如果你增加第一个（in）动画的持续时间，你需要增加第二个（out）的延迟。

例子：

-webkit-animation: in 20s 200ms  forwards, out 1s 20200ms forwards;

希望这会有所帮助！

于 2015-05-21T01:14:07.167 回答