イージー・イン・アウトの効果が働かない

Question

イージー・オーバーレイ・イージー・イン・アウトを作成したいのですが残念ながらうまくいきません。何が間違っているのか教えていただけますか？事前に

.product-item-info{ 
 
    position:relative; 
 
    width:600px; 
 
} 
 
.product-item-info:hover:after { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    visibility: visible; 
 
} 
 
.product-item-info:after { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    content: ""; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 5; 
 
    -webkit-transition: all 30s ease-in-out 30s; 
 
    -moz-transition: all 30s ease-in-out 30s; 
 
    -ms-transition: all 0.2s ease-in-out 0s; 
 
    transition: all 3s ease-in-out 30s; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    visibility: hidden; 
 
}

<ul> 
 
    <li class="product-item"> 
 
     <div class="product-item-info"> 
 
      <img class="product-image-photo" src="http://stagepearl.weltpixel.com/pub/media/catalog/product/cache/8/image/600x600/beff4985b56e3afdbeabfc89641a4582/1/0/10001-00001-os_03_grande_1.jpg" alt="Test22" width="600" height="600"> 
 
     </div> 
 
    </li> 
 
</ul>

ありがとう！

Answer 1

ITSは細かい作業 - あなたはtransitionベンダープレフィックスのための異なる値を持ちます。

transition: all 3s ease-in-out 0s; 

下記を参照のデモ：私はへの移行を調整し

.product-item-info { 
 
    position: relative; 
 
    width: 600px; 
 
} 
 
.product-item-info:hover:after { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    visibility: visible; 
 
} 
 
.product-item-info:after { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    content: ""; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 5; 
 
    -webkit-transition: all 3s ease-in-out 0s; 
 
    -moz-transition: all 3s ease-in-out 0s; 
 
    -ms-transition: all 3s ease-in-out 0s; 
 
    transition: all 3s ease-in-out 0s; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    visibility: hidden; 
 
}

<ul> 
 
    <li class="product-item"> 
 
    <div class="product-item-info"> 
 
     <img class="product-image-photo" src="http://stagepearl.weltpixel.com/pub/media/catalog/product/cache/8/image/600x600/beff4985b56e3afdbeabfc89641a4582/1/0/10001-00001-os_03_grande_1.jpg" alt="Test22" width="600" height="600"> 
 
    </div> 
 
    </li> 
 
</ul>