On load page CSS image transform scale smoothly (change image size on page load)

Question

This is my link. When I click on and icon it gets bigger then other for prompting on which page you're. I need it to transform scale smoothly (icon become bigger smoothly).

Answer 1

I've done this using simple technique used in css, leave the width of icon the it is on corresponding page and just add the id.

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

And the 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;
}}