Sur la page de chargement CSS échelle de transformation de l'image en douceur (changer la taille de l'image sur le chargement de la page)

Question

Ceci est mon link. Lorsque je clique sur et l'icône devient plus grand que l'autre pour demander sur quelle page vous êtes. J'en ai besoin pour transformer l'échelle en douceur (l'icône s'agrandit doucement).

Answer 1

Je l'ai fait en utilisant une technique simple utilisée dans CSS, laissez la largeur de l'icône de la page correspondante et ajoutez simplement l'ID.

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

Et le 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

Ce code CSS fera ce que vous voulez:

.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); 
}