javascript - 如何倒序运行CSS3动画的某部分

Question

我试图在 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;
        }
    }

Answer 1

与其尝试手动编写动画代码并绕过 CSS 3 过渡的所有限制，我建议您帮自己一个大忙，使用各种 JavaScript 补间库之一，例如 Greensock animation platform。 (全局行动计划)。

它非常强大，支持延迟、交错、重复、循环、反向等。您可能可以用 GSAP 在几行中重写上面的内容(加上您需要的附加功能)。

您可以看到它如何与 CSS 3 过渡相比较 here .