I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself.
To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/
Any idea what's causing it to reset?
body:before{
content:"";
position:absolute;
top:0px;
left:0px;
height: 100vh;
width: 100%;
background-image: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg");
background-position:center center;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -9;
-webkit-animation: zoomin 5s ease-in;
animation: zoomin 5s ease-in;
}
/* Zoom in Keyframes */
@-webkit-keyframes zoomin {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}
@keyframes zoomin {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
} /*End of Zoom in Keyframes */