JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outer">
<img src="http://onebigphoto.com/uploads/2011/11/colorful-chameleon.jpg" />
</div>
CSS
#outer {
width: 690px;
height: 440px;
position: relative;
}
#outer img {
width: 690px;
height: 440px;
position: absolute;
top: 0px;
left: 0px;
/* Animation */
animation:zoom 2s;
-moz-animation:zoom 2s; /* Firefox */
-webkit-animation:zoom 2s; /* Safari and Chrome */
-o-animation:zoom 2s; /* Opera */
}
@keyframes zoom {
from { transform:scale(1) }
to { transform:scale(1.2) }
}
@-moz-keyframes zoom {
from { -moz-transform:scale(1) }
to { -moz-transform:scale(1.2) }
}
@-webkit-keyframes zoom {
from { -webkit-transform:scale(1) }
to { -webkit-transform:scale(1.2) }
}
@-o-keyframes zoom {
from { -o-transform:scale(1) }
to { -o-transform:scale(1.2) }
}