このCSS3コードを持っている:
#box1
{
position: relative;
width: 300px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 700px;
top: -200px;
height: 150px;
}
@-webkit-keyframes myfirst {
0% { right:700px; top:-200px;background: yellow;}
50% {background:blue; right:700px; top:200px;}
100% { right:700px; top:-200px; background: yellow}
}
#stam {
font-size: large;
background: green;
width: 100px;
top: 400px;
position: absolute;
}
#stam:hover ~ #box1 { -webkit-animation:myfirst 2s; }
ここでコードがどのように機能するかを確認できます:http://jsfiddle.net/FLe4g/2/
私の質問は、どうすればアニメーションを実行できるので、「stam」divにマウスを置くと、アニメーションはアニメーションの「50%」( 50% {background:blue; right:700px; top:200px;})
で停止し、「stam」divからマウスを移動した場合にのみアニメーションが続行されます。 ?私は、解決策がjsではなくCSS3を使用することを本当に望んでいます...ありがとう!