載入頁面CSS圖像變換比例平滑（頁面加載時更改圖像大小）

Question

這是我的link。 當我點擊圖標時，它會變大，然後其他的提示您在哪個頁面上。 我需要它順利地轉換比例（圖標變得更加平滑）。

Answer 1

我已經完成了這個使用簡單的技術在CSS中使用，留下它在相應的頁面上的圖標的寬度，只是添加ID。

<td id="zoom"><a href="visualization.html"><img src="image/bubble_plus3.png" width="150" /></a></td> 

而CSS：

#zoom img { 
/*transform:scale 1s; 
animation: scale 1s;*/ 
-moz-animation: scale 0.5s; /* Firefox */ 
-webkit-animation: scale 0.5s; /* Safari and Chrome */ 
-o-animation: scale 0.5s; /* Opera */ 
margin-top:-20px;} 
@keyframes scale { 
from { 
    width:107px; 
} 
to { 
    width:150px; 
}} 
@-moz-keyframes scale { /* Firefox */ 
from { 
    width:107px; 
} 
to { 
    width:150px; 
}} 
@-webkit-keyframes scale { /* Safari and Chrome */ 
from { 
    width:107px; 
} 
to { 
    width:150px; 
}} 
@-o-keyframes scale { /* Opera */ 
from { 
    width:107px; 
} 
to { 
    width:150px; 
}} 

Answer 2

#itemdisplay{ 
    width: 200px; 
    height: 250px; 
    border: 5px solid #fff; 
    -webkit-transition: all .2s ease-in-out; 
    background: #ff0; 
} 
#itemdisplay:hover{ 
    -webkit-transform: scale(1.1); 
} 

Answer 3

這個CSS代碼將做你想要什麼：

.zoom { 
    -webkit-transition:all 1s linear; 
    -moz-transition:all 1s linear; 
    -ms-transition:all 1s linear; 
    -o-transition:all 1s linear; 
    transition:all 1s linear; 
} 

.zoom:hover { 
    -webkit-transform:scale(1.5); 
    -moz-transform:scale(1.5); 
    -ms-transform:scale(1.5); 
    -o-transform:scale(1.5); 
    transform:scale(1.5); 
}