链式变换动画不具有动画效果

Question

在处理动画时,我遇到了一个没有记录的意外行为:

当使用transform(任何转换属性,仅转换属性)链接动画时,第一个动画将具有从状态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 bug吗？

更新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>

附注:

• 使用分号 - 如果不这样做,你就会无缘无故地让每个人的生活更加艰难.
• 使用良好的格式 - 与上述相同的原因
• 你不需要使用-moz-的animation或transform(有没有 -moz-transform)
• 在前缀之后放置未加前缀的属性版本- 你希望它们尽可能使用更标准的版本 - 因为CSS是级联的,这意味着它会在之后放置,它将回到上面的内容.