0

ホバー効果を要素にしようとしています ここに私のコードとフィドルがあります

http://jsfiddle.net/Fbk9t/

/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
 @keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Firefox */
 @-moz-keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Safari and Chrome */
 @-webkit-keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Opera */
 @-o-keyframes myAnim1 {
    0% {
        background-color: #212121;
    }
    50% {
        background-color: #31f4dc;
    }
    100% {
        background-color: #212121;
    }
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
 .firstelement {
    display:inline-block;
    animation:myAnim1 5s;
    -moz-animation:myAnim1 5s infinite;
    -webkit-animation:myAnim1 5s infinite;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
 .firstelement:hover {
    background-color: #ff0000;}

したがって、ホバーをどのように設定しても、アニメーションは実行され続けます。このような状況を解決するための正しいルートは何ですか?

遷移にも注意してください..

4

2 に答える 2

2

:hover要素を使用するときは、アニメーション ループを停止する必要があるため、次のようにします。

 .firstelement:hover {
    background-color: #ff0000;
    animation: none;
    -moz-animation: none;
    -webkit-animation: none;
}

ここに例がありますhttp://jsfiddle.net/Fbk9t/1/

お役に立てば幸いです;）

于 2013-01-25T16:48:58.463 に答える
1

次のコードを無限から1に変更します。

Old version:
    -moz-animation:myAnim1 5s infinite;
    -webkit-animation:myAnim1 5s infinite;
New version
    -moz-animation:myAnim1 5s 1;
    -webkit-animation:myAnim1 5s 1;
于 2013-01-25T16:52:02.703 に答える