0

アニメーションを 2 部構成で作成したいと考えています。少し説明します。

私は四角形を持っています。アニメーションの開始時に、上部に縮小するアニメーションがあります。このアニメーションの終了後、この状態を維持し、js を使用してアニメーションが終了したことを検出し、2 つ目のアニメーションを追加して四角形の下部を縮小します。現時点では2つのアニメーションがありますが、以前の状態は気にしないでください。

@-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/

4

2 に答える 2

0

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 フィドルのデモ

于 2013-05-10T17:46:11.263 に答える