CSS - 要素のアニメーションを停止/開始しますが、他の要素と同期しています

Question

私は苦労しているものはCSSアニメーションです。

私は8枚の画像を持っていますが、あるものは回転しており、他の画像はグレースケールです。 回転している画像の上をホバリングすると、元の位置（回転しない）で回転が終了して停止します。しかし、その上に、ホバーが終わるともう一度回転が始まりますが、同時に他の回転要素と同じ回転が始まります。

これは可能ですか？

は

ここでは、私がこれまで

.kanto { 
 
    text-align: center; 
 
} 
 

 
.kanto img { 
 
    width: 37px; 
 
    margin: 1px; 
 
} 
 

 
.collected { 
 
    animation: rotation 3s infinite linear; 
 
} 
 

 
.collected:hover { 
 
    animation-play-state: paused; 
 
} 
 

 
.uncollected { 
 
    filter: grayscale(100%); 
 
} 
 

 
@-webkit-keyframes rotation { 
 
    from { 
 
    transform: rotateY(0deg); 
 
    } 
 
    to { 
 
    transform: rotateY(359deg); 
 
    } 
 
}

<div class="kanto"> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
</div>

Answer 1

代わりのアニメーションを一時停止を管理してきたもの、それが唯一のループに固執作るのです。このようなトリックに、（唯一の難点を行うべきです1つのアニメーションサイクルが完了しなければならないということです。最初の3秒間にマウスを移動すると、アニメーションサイクルが完了すると、アニメーションは「一時停止」するだけです。）：

.kanto { 
 
    text-align: center; 
 
} 
 

 
.kanto img { 
 
    width: 37px; 
 
    margin: 1px; 
 
} 
 

 
.collected { 
 
    animation: rotation 3s infinite linear; 
 
} 
 

 
.collected:hover { 
 
    animation: rotation 3s linear !important; 
 
} 
 

 
.uncollected { 
 
    filter: grayscale(100%); 
 
} 
 

 
@-webkit-keyframes rotation { 
 
    
 
    to { 
 
    transform: rotateY(360deg); 
 
    } 
 
}

<div class="kanto"> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
</div>

フルサイクルが完了するためにあなたは待つことができない場合は、このように、div要素と注入し、静止画になります:after要素で画像をラップすることによって、それを回避することができます

を

.kanto { 
 
    text-align: center; 
 
} 
 

 
.kanto img { 
 
    width: 37px; 
 
    margin: 1px; 
 
} 
 
.wrapper { 
 
    display:inline-block; 
 
    } 
 
.collected { 
 
    animation: rotation 3s infinite linear; 
 
} 
 

 
.wrapper:hover .collected { 
 
    animation: rotation 3s linear !important; 
 
    visibility:hidden; 
 
} 
 
.wrapper:hover:after{ 
 
    height: 37px; 
 
    margin: 1px; 
 
    display: inline-block; 
 
    content: ''; 
 
    background-image: url(https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png); 
 
    width: 37px; 
 
    background-size: contain; 
 
    margin-left: -42px; 
 
} 
 
.uncollected { 
 
    filter: grayscale(100%); 
 
} 
 

 
@-webkit-keyframes rotation { 
 
    
 
    to { 
 
    transform: rotateY(360deg); 
 
    } 
 
}

<div class="kanto"> 
 
<div class=wrapper> 
 
<img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
</div> 
 
<div class=wrapper> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    </div> 
 
    <div class=wrapper> 
 
    <img class="collected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    </div> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
    <img class="uncollected" src="https://cdn.bulbagarden.net/upload/thumb/e/e6/Glacier_Badge.png/50px-Glacier_Badge.png" /> 
 
</div>