アニメーションを一時停止するためのホバリング効果を探しています.....
サイズ400x400の単一のdivを作成し、そのdiv内にそれぞれサイズ150x150の4つの画像を追加し、それぞれにサイズ150x150の単一のdivを与えました.....
そのため、1 つの div に 4 つの異なる div 要素が作成されます....!
css3アニメーションと上の画像のようなwebkitフレームを使用して4つの画像を回転させました.ホバーしたときにこのアニメーションを一時停止して、ホバーしたときに各画像にバブルメッセージを表示できるようにします...
div1、div2、div3、div4 に個別にホバー一時停止を与え、ホバーすると特定の画像のみが一時停止し、他の 3 つの画像は回転を続け、アニメーションを見るのがぎこちなく見えます..
そして、一時停止ホバーを外部 div に使用すると、内部 div は影響を受けず、アニメーションは引き続き続行されます....
1つの画像にカーソルを合わせたときに4つの画像すべてのアニメーションを停止し、ホバリングを解除した後も回転を続ける必要があるだけです.....
私はcssが初めてなので、すべてのあなたの助けと答えを尊重します......
ここに私が使用したコードがあります....
`/* css*/ .div1 { width:170px; 高さ:170px; 位置:相対; アニメーション:myfirst 5s 無限; アニメーション方向:代替;
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:myfirst 5s infinite;
-moz-animation-direction:alternate;
-o-animation:myfirst 5s infinite;
-o-animation-direction:alternate;
-ms-animation:myfirst 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes myfirst
{
0% { left:0px; top:0px;}
25% { left:150px; top:0px;}
50% { left:150px; top:150px;}
75% { left:0px; top:150px;}
100% { left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%
{
left:0px;
top:0px;
}
25%
{
left:170px;
top:0px;
}
50%
{
left:170px;
top:170px;
}
75%
{
left:0px;
top:170px;
}
100%
{
left:0px;
top:0px;
}
}
.div2
{
width:170px;
height:170px;
position:relative;
animation:myfourth 5s infinite;
animation-direction:alternate;
-webkit-animation:myfourth 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:myfourth 5s infinite;
-moz-animation-direction:alternate;
-o-animation:myfourth 5s infinite;
-o-animation-direction:alternate;
-ms-animation:myfourth 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes myfourth
{
0% { left:0px; top:150px;}
25% { left:0px; top:0px;}
50% { left:150px; top:0px;}
75% { left:150px; top:150px;}
100% { left:0px; top:150px;}
}
@-webkit-keyframes myfourth /* Safari and Chrome */
{
0%
{
left:0px;
top:170px;
}
25%
{
left:0px;
top:0px;
}
50%
{
left:170px;
top:0px;
}
75%
{
left:170px;
top:170px;
}
100%
{
left:0px;
top:170px;
}
}
.div3
{
width:170px;
height:170px;
position:relative;
animation:mysecond 5s infinite;
animation-direction:alternate;
-webkit-animation:mysecond 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:mysecond 5s infinite;
-moz-animation-direction:alternate;
-o-animation:mysecond 5s infinite;
-o-animation-direction:alternate;
-ms-animation:mysecond 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes mysecond
{
0% { left:150px; top:0px;}
25% { left:150px; top:150px;}
50% { left:0px; top:150px;}
75% { left:0px; top:0px;}
100% { left:150px; top:0px;}
}
@-webkit-keyframes mysecond /* Safari and Chrome */
{
0%
{
left:170px;
top:0px;
}
25%
{
left:170px;
top:170px;
}
50%
{
left:0px;
top:170px;
}
75%
{
left:0px;
top:0px;
}
100%
{
left:170px;
top:0px;
}
}
.div4
{
width:170px;
height:170px;
position:relative;
animation:mythird 5s infinite;
animation-direction:alternate;
-webkit-animation:mythird 5s infinite;
-webkit-animation-direction:alternate;
-moz-animation:mythird 5s infinite;
-moz-animation-direction:alternate;
-o-animation:mythird 5s infinite;
-o-animation-direction:alternate;
-ms-animation:mythird 5s infinite;
-ms-animation-direction:alternate;
}
@keyframes mythird
{
0% { left:150px; top:150px;}
25% { left:0px; top:150px;}
50% { left:0px; top:0px;}
75% { left:150px; top:0px;}
100% { left:150px; top:150px;}
}
@-webkit-keyframes mythird /* Safari and Chrome */
{
0%
{
left:170px;
top:170px;
}
25%
{
left:0px;
top:170px;
}
50%
{
left:0px;
top:0px;
}
75%
{
left:170px;
top:0px;
}
100%
{
left:170px;
top:170px;
}
}