如何以相反的顺序运行 CSS3 动画的某些部分答案

【问题标题】：How to run certain part of CSS3 animation in reverse order如何以相反的顺序运行 CSS3 动画的某些部分
【发布时间】：2013-04-04 00:22:18
【问题描述】：

我正在尝试在向前运行后以相反的顺序运行 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;
        }
    }

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

我建议您帮自己一个大忙，使用各种 JavaScript 补间库之一，例如 Greensock animation platform (GSAP ）。

它非常强大，支持延迟、交错、重复、循环、反向等。您可以用 GSAP 用几行代码重写上述内容（加上您需要的附加功能）。

您可以看到它如何与 CSS 3 过渡 here 叠加。

【讨论】：

【解决方案2】：

你试过这个吗？

.foo{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}

here 是 Mozilla 开发网络参考
和here W3C 参考

【讨论】：

正确答案，但不幸的是错误的链接。 w3schools is not related to the W3C! 更好地链接到 developer.mozilla.org/en-US/docs/CSS/animation-direction（更改它并获得支持 :-)
是的，我正要这么说。那是 W3Schools 链接。查看 W3Fools 网站。但无论如何，谢谢。我会调查的。
我知道我现在如何使用alternate，但是我如何应用它以便它只向后运行一半动画（从100% 到50%），然后不再向前运行。
OP 想要回到 50% 的关键帧。
@Bergi 感谢您提供正确的链接。我知道我现在如何使用备用，但我如何应用它以便它仅向后运行一半动画（从 100% 到 50%），然后不再向前运行。

【解决方案3】：

看一下立方体贝塞尔曲线作为缓动函数，而不是缓入缓出。 http://cubic-bezier.com

您必须使动画达到当前的 50% 标记，并通过使用正确的贝塞尔曲线，使其“过冲”并向后移动。像这样：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/

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

PS：为了获得灵感，可以在这里找到一些更酷的 css 动画效果：http://daneden.me/animate/

【讨论】：

我对如何使用三次贝塞尔曲线将动画反转到某个点感到困惑。看来它只是为了替代ease-in-out。
试着摆弄一下你现在拥有的代码，我会尽力演示
您将动画的目标设为中点，并使用贝塞尔曲线缓动超过 50%，然后在中间完成。这肯定是黑客攻击？

【解决方案4】：

您可以反向编写另一个关键帧动画（或使用反向），使您需要的动画从 0% 到 100% 并且运行时间减半。因此，当动画结束时，您可以使用 jQuery 绑定到动画结束并添加一个应用“反向”动画的类。

【讨论】：