twinkle jump bouncing heart slideshow

<style>
.slideshow, .slideshow > img {
-webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.slideshow {
top: 1em;
right: 3em;
width: 7.25em;
height: 7.25em;
animation: bounce-rotate 2s infinite;
animation-timing-function: cubic-bezier(1, 0.35, 0.09, 0.85);
}

.mySlides {display:none;}

@keyframes bounce-rotate {
0% { transform: rotate(0) translateY(0); }
25% { transform: rotate(-25deg) translateY(-10em); }
50% { transform: rotateY(150deg)
translateY(-10em); }
75% { transform: rotateY(0)
translateY(-13em); }
100% { transform: rotateY(0) translateY(4em); }
}
</style>

<body>

<div class="slideshow" style="position:absolute">

<img class="mySlides" src="https://dl.dropbox.com/s/emkxdiki357lohi/776FF589-CA7F-4FE9-9EAA-D1193FFD23EF.gif" style="width:100%">

<img class="mySlides" src="https://dl.dropbox.com/s/dv6573yel1adq0f/D30CEB0E-CE6E-4C0F-8E1B-EC08851F6F45.gif" style="width:100%">

</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</body>