I have created a jQuery animation with four functions named ani1(), ani2(), ani3(), and ani4(). Everything is working fine on desktop, but now I am facing the challenge of making it responsive for mobile devices. I am looking for CSS code to replicate the same animation I have created using jQuery.
Here is my HTML structure:
<img class="1st" src="img/imgpsh_fullsize.png" style="width:100%; height:100%;">
<div id="animate1" style="bottom:16.5em;left:33.5em;display:none;">
<img class=" boy" src="img/finger.png" style="" />
</div>
<div class="2nd" style="position:absolute; bottom:0; left:25em;display:none;">
<img class="remote" src="img/remote.png">
</div>
<div class="3rd" style="position:absolute; bottom:0; left:20em;display:none;">
<img class="hand" src="img/hand1.png">
</div>
<div class="4th" style="position:absolute; bottom:0; left:5em;display:none;">
<img class="ie" src="img/ielogo.png">
</div>
And here is the corresponding jQuery code:
function ani1() {
$("#animate1").fadeIn().animate({'display':'inline-block'}, 1000, function(){
$('.1st').animate({'opacity': '0.9','z-index':'2'}, 1500, function(){
$('.1st').animate({'opacity':'1','z-index':'2'});
});
});
$("#animate1").fadeIn().animate({'display':'inline-block'}, 3000).fadeOut();
}
// Functions for ani2(), ani3(), and ani4() follow...
var interval1 = [ani1, ani2, ani3, ani4];
var index = 0;
$(document).ready(function(){
window.setInterval(function(){
interval1[index++ % interval1.length]();
}, 8800);
});
While the jQuery animation works well on desktop, I now aim to translate these functions into CSS animations that run sequentially without overlapping. How can I achieve this seamless transition between the four jQuery functions in CSS?