ease-in-out 효과가 작동하지 않습니다.

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

그것 - 당신이 다른 값을 가질 당신 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>

나는로의 전환을 조정