1

<div>アニメーションを再生する があります。アニメーションがまだ再生されている間、div:hoverそれが影響を受けるのを防ぎたいです。<div>

例えば：

<div></div>

div:before {
    content: "A";
    -webkit-animation: A 5s;
    -moz-animation:    A 5s;
    animation:         A 5s;
}

@-webkit-keyframes A {
     100% { font-size: 5em; }
}

@-moz-keyframes A {
     100% { font-size: 5em; }
}

@keyframes A {
    100% { font-size: 5em; }
}

div:hover:before { 
    content: "B";
}

http://jsfiddle.net/hh54D/

この例では、アニメーションによって文字「A」のサイズが大きくなります。ただし、アニメーションにカーソルを合わせるdiv:hoverと、文字「B」に変わります。これが起こらないようにしたいと思います。つまり、ホバーした場合、アニメーションが終了するまで文字「A」のままにする必要があります。CSSでこれをどのように行うべきですか？

4

1 に答える 1

0

気にしなければ、Jquery でこれを行うことができます。移行の場合:

$("#YourDivID").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){change div content to B});

アニメーションの場合:

$("#YourDivID").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){change div content});

純粋な js を使用することもできます。

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

この投稿を読むことができます

于 2013-10-15T04:21:49.213 に答える