css - 使用 CSS3 转换保留状态

Question

我想制作一个分为两部分的动画。我稍微解释一下。

我有一个矩形，在动画开始的时候，顶部会有一个动画要缩小。在这个动画结束后，我想保持这个状态，使用 js 来检测动画何时完成并添加我的第二个动画收缩矩形的底部。目前有两个动画，但不要记住之前的状态。

@-webkit-keyframes scale {
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(900px) rotateX(10deg);
    }
}
@-moz-keyframes scale {
    100% {
        -moz-transform-origin: 50% 100%;
        -moz-transform: perspective(900px) rotateX(10deg);
    }
}

.scale {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(900px) rotateX(10deg);

    -moz-transform-origin: 50% 100%;
    -moz-transform: perspective(900px) rotateX(10deg);
}

@-webkit-keyframes toto {
    100% {
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(900px) rotateX(-10deg);
    }
}

@-moz-keyframes toto {
    100% {
        -moz-transform-origin: 50% 0%;
        -moz-transform: perspective(900px) rotateX(-10deg);
    }
}

.scale2 {
    background: purple !important;

    -webkit-animation: toto 1.4s ease forwards !important;
    -moz-animation: toto 1.4s ease forwards !important;
}

一些 jsfiddle 代码:http://jsfiddle.net/JeremDsgn/Dfyam/2/

Answer 1

我建议您使用插件，例如 jQuery Transit因为它是保留 css3 转换/转换状态的理想选择，尤其是当您计划制作大量动画时。这比维护一个大的 CSS 文件要容易得多。

例子:

//Initial settings on Window DIV
$('#window').css( { 'transformOrigin': '50% 100%', perspective: '900', rotateX: 10 } );


$('#yoyo').on("click", function () {

    $('#window').transition( { background: 'purple' }, 1400, 'in', function () {
        //Do any additional animations here, such as change the background again
        $('#window').delay(2000).transition( { background: 'blue' }, 3000, 'out');
    });    

});

JS Fiddle Demo