CSS 动画 : how to trigger the reverse animation?

Question

我正在尝试创建一个简单的可重用 CSS 类，这样我就可以在任何地方使用这个动画。

一切正常，除了我找不到任何关于如何触发反向动画的示例/文档。

这是我的 HTML:

<div class="cards">
        <div class="card">
            <div class="frontpage">
                <img src="http://lorempixel.com/400/200/"/>
            </div>
            <div class="rearpage">
                <img src="http://lorempixel.com/g/400/200/"/>
            </div>
        </div>

        <div class="card">
            <div class="frontpage">
                <img src="http://lorempixel.com/400/200/"/>
            </div>
            <div class="rearpage">
                <img src="http://lorempixel.com/g/400/200/"/>
            </div>
        </div>
</div>

我的动画是一个类似“卡片翻转”的动画，使用 Javascript 中的简单 toggleClass 来触发动画:

$('.card').click(function(){
    $(this).toggleClass('opened');
});

这是我的 CSS:

.cards {
    width: 800px;
    margin: auto;
}

.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
}

.card .frontpage, .card .rearpage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}


.card .rearpage {
    width: 0%;
}

.card .frontpage img, .card .rearpage img {
    width: 100%;
    height: 100%;
}


/***** ANIMATIONS *****/

/* ANIMATION 1 */
.card .frontpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .frontpage {
    -webkit-animation-name: frontToRear;
}

@-webkit-keyframes frontToRear {
    0% { width: 100%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 0%; }
}

/* ANIMATION 2 */
.card .rearpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .rearpage {
    -webkit-animation-name: rearToFront;
}

@-webkit-keyframes rearToFront {
    0% { width: 0%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 100%; }
}

这样做的聪明方法是什么？我希望我可以在我的 .rearcard 上放置一些触发器来触发反转动画，但我找不到任何方法可以做到这一点。

我知道我可以编写另外 2 个“反转”动画并应用它们，但它看起来太愚蠢了，我无法尝试做得更好。

我设置了一个 jsfiddle帮你分析测试出来:http://jsfiddle.net/9yp3U/

Answer 1

您使用 margin 和 width 来伪造旋转的方法非常有趣，但您可以使用 rotateY 更简单地做到这一点

.cards {
    width: 800px;
    margin:auto;
    -webkit-perspective:1000;
}    
.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
    -webkit-transition: 1s ease-in;
    -webkit-transform-style: preserve-3d;
    -webkit-transform:translateZ(1px);
}    
.card .frontpage, .card .rearpage, img {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0; 
    left:0;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}
.card img {
    width: 100%;
    height: 100%;
}    
.card .rearpage,
.card.opened {
    -webkit-transform:rotateY(180deg);
}

Demo

至于您提出的问题，您可以使用 animation-direction:backwards 属性向后播放动画，尽管使用 CSS 切换动画 is hard .因此，我建议您改用 transition，因为它只是两个状态之间的变化。

为了以防万一，CSS 选择器不必总是采用 parent child 格式。在您的情况下，仅应用 .child 将执行相同的操作。 parent child 选择器仅在需要比现有属性更高的选择器特异性时才需要。

哦，还有仅供引用，这不需要 jQuery。如果你愿意，我包含了一个(未经测试的)javascript 等价物。如果这是您在页面上唯一使用 jQuery 的地方，我建议您不要使用它，因为加载整个 jQuery 库需要一些时间和数据。