0
アニメーションを停止する方法はありますか：ホバリングして、ホバリングしたらもう一度実行しますか？CSS：アニメーションを停止する：ホバー（JSなし）
が、私はアニメ状態ポーズでそれを行うのと思ったが、アニメーションはprecisedアニメーション遅延で複数の要素上で動作するように、このような解決策は、要素をdesynchronizes：
この部分は解決されます。
私が「少なくとも」達成したいのは、いったんホバリングされたアニメーションをすべて停止することです。
はまだこの部分のための解決策を探して：
と偉大な功績ホバー絵は、他のすべてのものの前に行くように、Zインデックスを変更...と来て（additionaly）になりますアニメーションからz-indexに戻る+アニメーションは、アニメーションがサイクルを続ける。
重要なこと - いいえJAVASCRIPT（私は実際に使ってみたいですが、いくつかのCMS設定のためにできません）。ホバーなし
コード：CODEPENとSOSnippet：
.cube2>div{
position:absolute;
left:50%;
transform: translateX(-50%);
width:450px;
}
.playground2 {
overflow: hidden;
}
.frame {
position: absolute;
top:-12px;
left:-1px;
z-index: 1;}
.one, .two, .three, .four, .five, .six, .seven, .eight{
animation: comedown 32s infinite ease-in-out
}
.eight {
animation-delay: 0s
}
.seven {
animation-delay: 4s
}
.six {
animation-delay: 8s
}
.five {
animation-delay: 12s
}
.four {
animation-delay: 16s
}
.three {
animation-delay: 20s
}
.two {
animation-delay: 24s
}
.one {
animation-delay: 28s;
}
.container {
background: darkkhaki;
height: 400px;
position: relative;
}
.cube2 {
top: 100px;
height: 300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
@-webkit-keyframes comedown {
0% {
top: 0%;
z-index: 1;
}
12.5% {
top: 120%;
z-index: 2;
left:50%;
transform:translateX(-50%);
}
13%{z-index:-15}
25%{
top:-50px;
transform: translateX(-32%)
}
35%{z-index:-10}
37.5%{
top:-42px;
transform: translateX(-35%);
}
50%{
top:-36px;
transform: translateX(-38%);
z-index:-6;
}
62.5%{
top:-28px;
transform: translateX(-41%);
z-index:-5;
}
75%{
top:-20px;
transform: translateX(-44%);
z-index:-4;
}
87.5%{
top:-12px;
transform: translateX(-47%);
z-index:-3;
}
100%{
top:0px;
left:50%;
transform:translateX(-50%);
z-index:-2;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="playground2 container">
<div class="cube2">
<div class="one">
<img class="face" src="https://s17.postimg.org/71iegzebj/img_little.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="two">
<img class="face" src="https://s17.postimg.org/duncqzuin/img_little3.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="three">
<img class="face" src="https://s17.postimg.org/o3b8j2t6n/img_little2.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="four">
<img class="face" src="https://s17.postimg.org/v97kz9rnj/img_little4.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="five">
<img class="face" src="https://s16.postimg.org/4reke4owl/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="six">
<img class="face" src="https://s16.postimg.org/3qebp07x1/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="seven">
<img class="face" src="https://s16.postimg.org/fgs96e0ph/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="eight">
<img class="face" src="https://s16.postimg.org/xxmnx7gnp/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
</div>
</div>
最初の部分のためのソリューションは、魔法のように動作しますが、1秒間何もしません。 – oboer
'！important'を使用しましたか？ codepenで同じコードを見よう： https://codepen.io/Leonis/pen/wzOZja –
はい、私が気づいていないことは、アニメーションが適用される前に動作することです（遅延された画像の場合のみ）。私は理由を言うことができません。画像が一旦後退すると、Zインデックスによるホバー効果は完全に無視されます。 – oboer