CSS-Animation auf schweben manchmal andere nicht funktioniert

Question

Das ist mein HTML ist:

<div class="wrapper"> 
    <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>WEBSITE RESPONSIVO EM HTML5 PARA <br> A EMPRESA OR LEDS</span></figure> 
    <figure align="center"><img src="http://www.felipegrin.com/port/or-cat.jpg" alt=""><br><span>CATÁLOGO DE PRODUTOS FEITO PARA A <br> EMPRESA OR LEDS</span></figure> 
    <figure align="center"><img src="http://www.felipegrin.com/port/cci.jpg" alt=""><br><span>WEBSITE PARA O CENTRO CULTURAL <br> ISRAELITA (CCI)</span></figure><br> 
    <figure align="center"><img src="http://www.felipegrin.com/port/cartazes.jpg" alt=""><br><span>CARTAZES PUBLICITÁRIOS PARA O CENTRO <br> CULTURAL RAV KOOK</span></figure> 
    <figure align="center"><img src="http://www.felipegrin.com/port/padronagem.jpg" alt=""><br><span>PADRONAGENS FEITAS PARA A DISCIPLINA <br> "DESENVOLVIMENTO DE PADRONAGENS"</span></figure> 
    <figure><img src="http://www.felipegrin.com/port/animacao.jpg" alt=""><br><span>ANIMAÇÃO FEITA PARA A DISCIPLINA <br> "ANIMAÇÃO PARA COMPUTAÇÃO"</span></figure> 
    </div> 

Und das ist die CSS:

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%; 
    } 
} 

Wie Sie here sehen können, scheint die Animation auf schweben zu arbeite beim ersten Mal, wenn du bei jedem Bild schwebst, aber wenn du es wiederholst zu schweben, funktioniert es manchmal einfach nicht! Das ist wirklich seltsam und ich kann nicht sehen, warum manchmal arbeiten würde und andere nicht!

Answer 1

Die Animation wird im Tag figure verwendet. Die span, die Sie als Beschreibung verwenden, befindet sich in Ihrem figure-Tag. Also, wenn Sie das Bild schweben, aber lassen Sie Ihre Maus auf die Beschreibung, feuern Sie nicht eine andere auf Hover-Ereignis. Die Animation feuern einfach nicht ab. Versuchen Sie, ein img-Tag zu verwenden, um das Bild selbst zu halten, und setzen Sie die Animation in das img-Tag, nicht das figure.