web-dev-qa-db-ja.com

1サイクルの終わりでアニメーションを停止できません

私はその瞬間にCSSアニメーションを作成しています。その中で、私は物を動かしており、ユーザーがマウスを離すまで終了位置に留まるようにしています。

body {
    background: url('osx.jpg');
    padding: 0;
    margin: 0;
    line-height: 60px;
}

@-webkit-keyframes item1 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    }

@-webkit-keyframes item2 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}

@-webkit-keyframes item3 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}

    div {
    position: relative;
    }
#folder {
    width: 120px;
    margin: 0px auto;
}

#folder > div {
    position: absolute; 
}

#folder:hover > div:nth-of-type(1) {
    -webkit-animation-name: item1;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(2) {
    -webkit-animation-name: item2;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(3) {
    -webkit-animation-name: item3;
    -webkit-animation-duration: 10s;
}

ただし、アニメーションが終了するたびに、繰り返します。私は一度だけそれが起こり、ユーザーが離れるまでその場所に留まることを望みます。仕様から一時停止したものを使用しようとしましたが、期待どおりに機能しません。どんな助けも大歓迎です。ありがとう。 :)

animationwebkitcss3
44
Johnny

次のコメントは私のために働いた。マイケルに感謝

「アニメーションの最後にアニメーション状態をフリーズするには、fillモードを追加する必要があります。

-webkit-animation-fill-mode: forwards;

forwardsは、アニメーションを最後のフレームの状態のままにします

backwardsはアニメーションを開始時に残します

98
iancrowther

アニメーションがまだ最初のフレームにリセットされる場合に備えて、cssを宣言するorderに注意してください。

これはうまく機能しています：

    animation: yourAnimationName 1s;
    animation-fill-mode: forwards;

これは（最初のフレームにリセット）しません：

    animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

トリッキー！

15
Mr_Pouet

質問を正しく理解している場合、反復を「1」に設定する必要があるようです。

-webkit-animation-iteration-count: 1;
2
word5150

Css3アニメーションは、アニメーションの終わりにデフォルトスタイルにリセットされます。あなたはjavascriptで何かを試すことができます：

EventListenerをアニメーションに追加し、保持したいスタイルを取得し、それらを手動で適用し、アニメーションを削除できます。

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd',
    function(){
        document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
        document.getElementById('yourdiv').style.webkitAnimationName = 'none';
    }, 
    false
);
1
Stef

これを試して：

-webkit-animation-duration: 10s, 10s;

:)

0
FrozenButcher