UPDATE: I managed to resolve the issue using this method (Big thanks to everyone who offered suggestions)
var intDuration = 50;
setInterval(
function(){
$('#image').animate({"margin-left": "-=0.05%", "margin-top": "-=0.05%", "width": "+=0.1%"}, 'slow');
},
intDuration
);
Currently, my JavaScript increases the width by 0.1% every 50 milliseconds. However, a problem arises where the image becomes uncentered after some time due to the increasing width. Is there a way to address this using JavaScript or CSS?
Here is the JavaScript code in question:
var intDuration = 50;
setInterval(
function(){
$('#image').animate({"width": "+=0.1%"},'slow');
},
intDuration
);
Below is the snippet of relevant CSS: (Apologies for any formatting issues or redundancies)
.image {
text-align: center;
vertical-align: middle;
background: #000;
}
.image img {
width: 1%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -20px;
}
This is how the HTML is structured:
<div class="image">
<img src="image.png" id='image'/>
Access JSFiddler here:
http://jsfiddle.net/Zane_/eERUA/