圖像縮放動畫不能用css工作

Question

我有一個問題：當我在css背景中添加一個圖像時，圖像停止縮放動畫。

遵循HTML代碼

<ul class="memberList"> 
    <li class="mem1"><a href="#"><b></b></a> <span>Member Name 1</span></li> 
</ul> 

對於全視角，請檢查Jsfiddle

Answer 1

這是可行的，你只需要設置在.memberList li.mem1 a bbackground-size。你也可能想要移動內部的轉換以便縮小。檢查了這一點，這是與這兩個小的變化你的代碼（從205px 226px大小更改爲適合您的喜好規模值）：

.memberList{ float: left; margin: 10px 0 0 15px; padding: 0; width: 1200px; position: absolute; top:0; left: 0;} 
 
.memberList li{ float: left; margin: 0 7px; text-align: center; list-style: none;} 
 
.memberList li a{display: block; border: solid 1px #f0f0f0; overflow: hidden; height: 144px; width: 130px; margin-bottom: 15px;} 
 
.memberList li a b {display: block; height: 144px; width: 130px;} 
 
.memberList li.mem1 a b{ 
 
\t background-image: url(https://s13.postimg.org/y77inuf47/member_pic1.jpg); 
 
\t background-repeat: no-repeat; 
 
\t background-position: center; 
 
\t background-size:205px 226px; 
 
    transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -webkit-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
} 
 
.memberList li:hover a b{ 
 
\t background-size: 100% 100%; /* width and height, can be %, px or whatever. */ 
 
}

<ul class="memberList"> 
 
    <li class="mem1"><a href="#"><b></b></a> <span>Member Name 1</span></li> 
 
</ul>