链式变换动画没有动画

Question

在处理动画时，我遇到了一个未记录的意外行为：

当使用变换（任何变换属性，并且只有变换属性）链接动画时，第一个动画将具有从状态 A 到状态 B 的预期行为，而第二个只会从 B 到 C，没有任何过渡。

  div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}

<div></div>

我知道在这种特殊情况下，可以一步完成，但这不是我正在寻找的解决方案

如何仅使用 CSS 解决此问题？

更新：在 Firefox 中似乎一切正常，会不会是 chrome 错误？

更新2：根据要求添加了前缀自由动画；变化不大。

Answer 1

看到这个http://jsfiddle.net/khanamiryan/3p3x7v1f/2/

@-webkit-keyframes inout {
    0% {
        -webkit-transform: scale(0)
    }
    50% {
        -webkit-transform: scale(1)
    }
    100% {
        -webkit-transform: scale(.5)
    }
}

Answer 2

这是另一个 Chrome 渲染错误。

奇怪的是，解决方法似乎是添加其他一些无关紧要的属性以使其识别动画似乎正在发生。在这种情况下，我添加了一行，将背景设置为 in 的 to 上的默认背景。这只需要为 -webkit- 关键帧动画完成。

您项目中的实际修复可能需要也可能不需要将属性更改为 else/adding 更多地方。不亲自测试就不知道了。

 div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
        background:red;
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}

<div></div>

旁注：

使用分号 - 如果不这样做，你就会无缘无故地让所有相关人员的生活更加艰难。
使用良好的格式 - 与上述相同的原因
您don't need to使用-moz-作为animation或transform（没有-moz-transform）
将属性的无前缀版本 放在有前缀的属性 之后 - 您希望它们尽可能使用更标准的版本 - 因为 CSS 是 cascading 意思是把它放在后面，它会回落到上面的东西。

链式变换动画没有动画

Chained transform animation doesn't animate

css

transform

css-transitions

css-animations