logo标签列表

如何倒序运行CSS3动画的特定部分

javascriptjquerycssanimation
3

我正在尝试在CSS3动画运行后将某个部分以相反的顺序运行。

我想要的部分是从50%到100%的关键帧，它们在前进后需要倒序。

我有5个动画按顺序进行fallA，fallB，fallC，fallD和fallE，然后在fallE完成后，我需要它转换为fallE，fallD，fallC，fallB和fallA;但是，只到它所在的100%的50%关键帧。

是否有一种方法可以使用CSS甚至javascript / jquery实现此操作？

以下是动画代码：

    .animated.fallA{
        -moz-animation: fallA 1s forwards ease-in-out;
        -webkit-animation: fallA 1s forwards ease-in-out;
        animation: fallA 1s forwards ease-in-out;
    }
    .animated.fallB{
        -moz-animation: fallB 1.2s forwards ease-in-out;
        -webkit-animation: fallB 1.2s forwards ease-in-out;
        animation: fallB 1.2s forwards ease-in-out;
    }
    .animated.fallC{
        -moz-animation: fallC 1.4s forwards ease-in-out;
        -webkit-animation: fallC 1.4s forwards ease-in-out;
        animation: fallC 1.4s fowards ease-in-out;
    }
    .animated.fallD{
        -moz-animation: fallD 1.6s forwards ease-in-out;
        -webkit-animation: fallD 1.6s forwards ease-in-out;
        animation: fallD 1.6s forwards ease-in-out;
    }
    .animated.fallE{
        -moz-animation: fallE 1.8s forwards ease-in-out;
        -webkit-animation: fallE 1.8s forwards ease-in-out;
        animation: fallE 1.8s forwards ease-in-out;
    }
    @-moz-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-webkit-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-moz-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-webkit-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-moz-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @-webkit-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @-moz-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-webkit-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }       
    }
    @-moz-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-webkit-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
4个回答
2
你尝试过这个吗？
.foo{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}

这里是 Mozilla 开发者网络的参考资料
而 这里 是 W3C 的参考资料。

回答正确，但不幸的是链接错误。w3schools与W3C无关！ 更好的链接是https://developer.mozilla.org/en-US/docs/CSS/animation-direction（更改它并获得赞同 :-) - Bergi
是的，我正要说那个。那是W3Schools的链接。去看看W3Fools网站吧。不管怎样，谢谢你。我会研究一下的。 - IrfanM
我现在知道如何使用alternate，但是如何应用它，使其仅在动画的一半（从100％到50％）向后运行，然后不再向前运行。 - IrfanM
OP想要返回到50%的关键帧。 - net.uk.sweet
@Bergi 谢谢您提供正确的链接。我现在知道如何使用 alternate，但是我该如何应用它，使其仅在动画的一半（从100％到50％）向后运行，然后不再向前运行。 - IrfanM
显示剩余2条评论
2
请看一下cubic-bezier作为缓动函数，而不是ease-in-out。 http://cubic-bezier.com 您需要将您的动画移到当前50%的位置，并使用正确的bezier，使其“超调”并移回。类似于这样：http://cubic-bezier.com/#.29,.61,.79,3 编辑： 我好像没有仔细查看您的动画代码。如果我正确理解您的代码，那么Bezier并不是您要寻找的东西，因为您正在尝试创建一个反弹效果，而不是弹性“超调”效果。 http://jsfiddle.net/4KwY8/1/ 解决方案并不难。您只需针对fallB、C和D定义您的关键帧略有不同。css会看起来像这样：
@keyframes fallB{
    0%{
        position:relative;
        opacity:0.0;
        top:-100px;
    }
    33%, 100%{
        opacity:1.0;
        top:0;
    }
    66%{
        top:-20px;
    }
}

如您所见，我在第1/3点和第3/3点都使用了中间关键帧。更改后的示例代码如下：http://jsfiddle.net/4KwY8/2/

我认为这就是您要的。您可能需要在时间和关键帧位置方面进行一些微调，但我认为您已经有了大致的想法。如果不清楚，请随时问。

附：这里还有一些很酷的CSS动画效果供您参考：http://daneden.me/animate/

1
我对如何使用cubic-bezier在一定程度上反转动画感到困惑。它似乎只是ease-in-out的替代品。 - IrfanM
尝试使用您现有的代码放置一个fiddle，我会尽力演示。 - Pevara
你可以将动画的目标设置为中间点，并使用贝塞尔缓动函数超调50％，然后在中间结束。这肯定是一种技巧吧？ - net.uk.sweet
2
与其试图手工编写动画，并绕过CSS 3转换的所有限制，我建议您做自己一个大忙，使用各种JavaScript缓动库之一，例如Greensock动画平台（GSAP）。
它非常强大，支持延迟，阶段，重复，循环，反向等功能。您可以使用GSAP在几行代码中重写上面的内容（以及您需要的其他功能）。
您可以在这里查看它与CSS 3转换的比较。
0

你可以编写另一个关键帧动画，使其反向播放（或使用方向反转），其中包含从0％到100％的所需动画，并在半个时间内运行。因此，当动画结束时，您可以使用jQuery绑定到动画结束并添加一个类，该类将应用“反向”动画。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接