HTML CSS Flying Image on Icon click (Easter egg) - html

Question

I'm build a portfolio page with cargo site. I'm not an developer and I don't have really a good Idea about HTML & CSS. I have tried some research on the Web for this but found nothing that would help me. Maybe some of you could help me.
I just wanted to build an Easter egg on my site, it should work like this: on a icon click it should trigger this css animation. The code for this animation is directly from cargo but it works only as an animation right away when you enter the page. How can I hide it behind a Icon trigger.
https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen
<div class="flier">{image 1}</div>
.flier {
pointer-events: none;
}
.flier {
animation: fly 50s linear infinite;
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;
}
/* Keyframe values control where the element will begin
and end its trajectory across the screen. Each rule
represents a path the element follows across the screen. */
#keyframes fly {
98.001%, 0% {
display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}
15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}
15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}
40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}
40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}
65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}
65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}
95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}

Answer 1

Step1: Add the button in HTML
<button onClick="animEgg()">
<i class="fas fa-egg"></i> <span id='toggleText'>Start</span>
</button>
Step2: Your code which has an image to be animated
<div class="flier">
<img src="https://picsum.photos/200/300" />
</div>
Step3: Add css
.flier > * {
/* Adjust animation duration to change the element’s speed */
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;
}
.flier img.anim{
animation: fly 50s linear infinite;
}
/* Keyframe values control where the element will begin
and end its trajectory across the screen. Each rule
represents a path the element follows across the screen. */
#keyframes fly {
98.001%, 0% {
display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}
15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}
15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}
40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}
40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}
65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}
65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}
95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}
Step4: Add JS (Hopefully jQuery library is linked)
function animEgg(){
$(".flier img").toggleClass('anim');
if($("#toggleText").text() == 'Start')
$("#toggleText").text('Stop');
else
$("#toggleText").text('Start');
}

Answer 2

All the constituent parts are there apart from triggering it.
Just need to trigger the animation by maybe adding a class specifically for the animation property... something like this?
https://codepen.io/badgerswork/pen/wvzvWdW
let elem = document.querySelector('.flier')
let trigger = document.querySelector('.activate')
trigger.addEventListener('click', function() {
elem.classList.toggle('active');
trigger.classList.toggle('active');
})
.flier {
pointer-events: none;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
z-index: 999999;
}
.flier.active {
animation: fly 50s linear infinite;
animation-delay: 1s;
}
.activate {
display: inline-block;
padding: 2em;
background: red;
color: white;
}
.activate.active {
display: inline-block;
padding: 2em;
background: green;
color: white;
}
#keyframes fly {
98.001%, 0% {
display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}
15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}
15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}
40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}
40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}
65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}
65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}
95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}
<div class="flier">
<img src="https://via.placeholder.com/150" />
</div>
Go