Currently, I am working on incorporating CSS Keyframe animations into my application that are triggered by different events. The animation involves a unicorn soaring up from the bottom of the screen, pausing in the middle momentarily, and then continuing upwards out of view.
I am facing an issue where the height of the page varies for different users due to varying content amounts, causing the animation timing to be relative to the overall page height rather than the user's position within the viewport.
This is what my code looks like at the moment:
<img src="../***" v-if="aCounter === 1" class="unicornUp" alt="Unicorn">
.unicornUp {
position: absolute;
width: 50%;
height: 50%;
right: 20%;
opacity: 0;
z-index: 99;
animation-name: unicornMoveUp;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-delay: 0.5s;
}
@keyframes unicornMoveUp {
from { bottom: 0; opacity: 1;}
20% {bottom: 20%; opacity: 1; transform: rotate(5deg);}
40% {bottom: 50%; opacity: 1;}
60% {bottom: 50%; opacity: 1; transform: rotate(-5deg);}
80% {bottom: 60%; opacity: 1;}
100% {bottom: 90%; opacity: 0;}
}
I have been considering using a sticky parent div to address this issue, but I am unsure if this is the correct approach and where to begin. Any guidance or assistance you can provide would be greatly appreciated!