链式变换动画没有动画

Posted

技术标签:

【中文标题】链式变换动画没有动画【英文标题】:Chained transform animation doesn't animate 【发布时间】:2015-06-10 17:41:28 【问题描述】:

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

当使用 transform(任何 transform 属性,并且只有 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 错误吗?

更新 2:根据要求添加了无前缀动画;变化不大。

【问题讨论】:

您是否只针对 Chrome 浏览器/?为什么不遵守标准 你指的是哪个标准? @KheemaPandey 刚刚在 Firefox 上尝试过,一切正常。现在我想知道这是否是一个 chrome 错误。 @Stephan Muller:无前缀@keyframes,仅此而已。 我在说为什么使用浏览器特定的前缀..标准是@keyframes 【参考方案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)
    

【讨论】:

感谢您的意见,但正如我所说,这不是我期望的答案。实际情况要复杂得多,我的问题实际上是这种行为,而不是这个确切的例子:)【参考方案2】:

这是另一个 Chrome 渲染错误。

奇怪的是,一种解决方法似乎是添加一些其他无关紧要的属性,以使其识别动画似乎正在发生。在这种情况下,我在into 上添加了一行将背景设置为默认值。这只需要对-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>

旁注:

使用分号 - 如果不这样做,您会无缘无故地让所有相关人员的生活更加艰难。 使用良好的格式 - 与上述相同的原因 你 don't need to 使用 -moz- 代替 animationtransform(那里 没有 -moz-transform) 将无前缀版本的属性置于前缀之后 - 您希望它们尽可能使用更标准的版本 - 因为 CSS 是 级联 这意味着将其放置在之后,它会回到上面的事情。

【讨论】:

“奇怪,...” 相反,这对于 Chrome 来说是完全正常的。

以上是关于链式变换动画没有动画的主要内容,如果未能解决你的问题,请参考以下文章

链式 UIView 动画,每个动画都包含循环内的完成块 [重复]

CSS3 链式动画

SVG 变换原点 CSS 动画 – Firefox 错误

安卓中的动画之属性动画

链式动画

Webkit 动画和变换