Question

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

使用transform（任何转换属性，只有转换属性）链接动画时，第一个动画将具有从状态A转换到状态B的预期行为，而第二个动画将从B转到C而没有任何转换

＆＃13;

  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);
    }
}

＆＃13;

<div></div>

＆＃13;

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

我怎样才能使用CSS解决这个问题？

更新：一切似乎在firefox中运行得很好，它可能是一个chrome bug吗？

更新2：根据要求添加了前缀免费动画;没有太大变化。

Answer 1

这是另一个Chrome渲染错误。

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

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

＆＃13;

 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);
    }
}

＆＃13;

<div></div>

＆＃13;

附注：

使用分号 - 如果不这样做，就会让所有人无缘无故地让所有人参与其中。
使用良好的格式 - 与上述相同的原因
-moz-或animation don't need to使用transform（不是 -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)
    }
}

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

2 个答案: