CSSアニメーションは時々動作し、他のではない

Question

これが私のHTMLあるん

body { 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    width: 100%; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -moz-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
} 

.wrapper figure { 
    cursor: pointer; 
    position: relative; 
    overflow: hidden; 
} 

.wrapper figure::before { 
    position: absolute; 
    top: 0; 
    left: -100%; 
    content: ''; 
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); 
    z-index: 2; 
    width: 50%; 
    height: 100%; 
    -webkit-transform: skewX(-25deg); 
    -moz-transform: skewX(-25deg); 
     -ms-transform: skewX(-25deg); 
     -o-transform: skewX(-25deg); 
      transform: skewX(-25deg); 
} 

.wrapper figure:hover::before { 
    -webkit-animation: shine .77s; 
    -moz-animation: shine .77s; 
     -o-animation: shine .77s; 
      animation: shine .77s; 
} 

.wrapper figure img { 
    z-index: 1; 
} 

.wrapper figure span { 
    font-family: 'Montserrat', sans-serif; 
    color: #3dadc7; 
    text-transform: uppercase; 
    font-size: 15px; 
} 

@-webkit-keyframes shine { 
    100% { 
    left: 100%; 
    } 
} 

@-moz-keyframes shine { 
    100% { 
    left: 100%; 
    } 
} 

@-o-keyframes shine { 
    100% { 
    left: 100%; 
    } 
} 

@keyframes shine { 
    100% { 
    left: 100%; 
    } 
} 

あなたがhereを見ることができるように、ホバー上のアニメーションがいるようです最初に各画像にマウスを置いて作業しますが、マウスを移動して再試行すると、時には機能しません。これは本当に奇妙で、なぜ時にはうまくいかないのか、他の人には理解できないのか分かりません！

Answer 1

figureタグでアニメーションが使用されています。説明として使用するspanは、figureタグ内にあります。だから、画像をホバーしてマウスを説明に合わせると、ホバーイベントで別の画像を発射しません。ちょうど消えないアニメーション。 imgタグを使用して画像自体を保持し、figureではなくimgタグにアニメーションを入れてみます。