#balloon-container {
position: fixed;
top: 50%;
left: -200px; /* start off-screen */
transform: translateY(-50%);
pointer-events: none; /* balloon won't block clicks */
z-index: 9999;
}
#balloon {
width: 150px;
animation: floatAcross 8s ease-in-out forwards;
filter: saturate(2) brightness(1.2); /* makes colors vibrant */
}
@keyframes floatAcross {
0% {
transform: translateY(-50%) translateX(0);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(-50%) translateX(120vw); /* fly off screen */
opacity: 0;
}
}
top of page
bottom of page
