链接的变换动画不进行动画处理

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

这是另一个Chrome渲染错误。

奇怪的是，一个变通方法似乎是添加一些其他无关紧要的属性，使其识别出动画似乎正在发生。在本例中，我添加了一行，将背景设置为默认情况下in的to上的背景。这只需要对-webkit-关键帧动画执行。

项目中的实际修复可能需要也可能不需要将属性更改为其他内容/将其添加到更多位置。我不能不测试自己就知道。

 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>

旁注：

• 使用分号-不这样做会让所有参与者的生活毫无理由地变得更加艰难
• 使用良好的格式-原因同上
• animation或transform不需要使用-moz-（没有-moz-transform）
• 将属性的非固定版本放在带有前缀的之后-您希望它们尽可能使用更标准的版本-因为CSS是级联，这意味着将其放在后面，它将回到上面的内容

Answer 2

请参阅http://jsfiddle.net/khanamiryan/3p3x7v1f/2/

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