Editting the CSS animation - css

Question

I found a css animation online, but i wanted to edit it a bit.
This is the link to the animation
Is there anyway i can make this animation run only when a certain button on the website is clicked, and is it possible that the door opens only once and it leads to a different site on the other end of the door??
Right now the door animation is running infinite times. Please help
body {
display: flex;
width: 100%;
height: 100vh;
background: #222;
perspective: 100vw;
overflow: hidden;
animation: squiggly-anim 0.4s infinite;
-webkit-animation: squiggly-anim 0.2s infinite;
}
#-webkit-keyframes squiggly-anim {
0% {
filter: url("#squiggly-0");
}
25% {
filter: url("#squiggly-1");
}
50% {
filter: url("#squiggly-2");
}
75% {
filter: url("#squiggly-3");
}
100% {
filter: url("#squiggly-4");
}
}
#keyframes squiggly-anim {
0% {
filter: url("#squiggly-0");
}
25% {
filter: url("#squiggly-1");
}
50% {
filter: url("#squiggly-2");
}
75% {
filter: url("#squiggly-3");
}
100% {
filter: url("#squiggly-4");
}
}
body .door {
position: absolute;
width: 100px;
height: 200px;
left: calc(50% - 50px);
top: calc(50% - 100px);
box-shadow: inset 0 -5px 0 0 #222, inset 0 0 0 1px #fff, 0 5px 0 0 #222, 0 0 0 100vw #222;
perspective: 500px;
transform-style: preserve-3d;
-webkit-animation: scaling 5s linear infinite;
animation: scaling 5s linear infinite;
transform: translateZ(-1px);
}
body .door:nth-of-type(3) {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
body .door:nth-of-type(3) .face {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
body .door:nth-of-type(2) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
body .door:nth-of-type(2) .face {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
body .door:nth-of-type(1) {
-webkit-animation-delay: 3.75s;
animation-delay: 3.75s;
}
body .door:nth-of-type(1) .face {
-webkit-animation-delay: 3.75s;
animation-delay: 3.75s;
}
#-webkit-keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
z-index: 0;
}
50% {
transform: translateZ(100vw);
opacity: 1;
z-index: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
z-index: 2;
}
100% {
transform: translateZ(300vw);
opacity: 0;
z-index: 3;
}
}
body .door:after {
content: "";
position: absolute;
width: 200vw;
height: 100vw;
left: -50vw;
bottom: 5px;
box-shadow: 0 1px 0 0 #fff;
z-index: -1;
}
body .door .face {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 4px);
transform-style: preserve-3d;
box-shadow: inset 0 0 0 1px #fff;
background: #222;
transform-origin: left;
-webkit-animation: swing 5s ease-in-out infinite;
animation: swing 5s ease-in-out infinite;
}
body .door .face:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
box-shadow: 0 0 0 1px #fff;
border-radius: 100%;
right: 10px;
top: calc(50% - 5px);
transform-style: preserve-3d;
transform: translateZ(6px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #222;
}
body .door .face:after {
content: "";
position: absolute;
width: 4px;
height: 2.5px;
box-shadow: 0 0 0 1px #fff;
opacity: 0.75;
border-radius: 0;
right: 10px;
top: calc(50% - 1.25px);
transform-style: preserve-3d;
transform: translateZ(2.5px) rotateY(90deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #222;
}
#-webkit-keyframes swing {
15% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-125deg) translateZ(-2px);
}
75% {
transform: rotateY(-125deg);
}
100% {
transform: rotateY(-125deg);
}
}
#keyframes swing {
15% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-125deg) translateZ(-2px);
}
75% {
transform: rotateY(-125deg);
}
100% {
transform: rotateY(-125deg);
}
}
body .door .face .right {
position: absolute;
width: 10%;
background: #222;
height: 100%;
top: 0;
right: -10%;
transform-origin: left;
transform: rotateY(90deg);
box-shadow: inset 0 0 0 1px #fff;
}
<div class='door'>
<div class='face'>
<div class='right'></div>
</div>
</div>
<div class='door'>
<div class='face'>
<div class='right'></div>
</div>
</div>
<div class='door'>
<div class='face'>
<div class='right'></div>
</div>
</div>
<div class='door'>
<div class='face'>
<div class='right'></div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
</svg>

Answer 1

There are a three main parts to this question.
First, how to have just one door in the animation. There are 4 divs with class door. If we take 3 of these out the remaining one animates, but there is a delay before the animation (needed in the original so that the 4 doors started their movements at staggered times) so we take that out. While we are at it we notice that there are several #keyframes repeated - only the last one would be used so we remove those too.
Second, the requirement is to start the door animation on clicking a button. So we add a button element and in JS attach an event listener to it. When clicked it will add the class 'open' to the door. In the CSS the animation to the door and the door face are changed so they are added when the class is open.u
Third the requirement is to go to a website when the door has opened. Ideally one would want the website gradually revealed as the door is opened. This can be achieved if the website is under our control, for example the code could be run at the start of the website and it would gradually get revealed. If not a similar effect can be achieved by putting the target website in an iframe and gradually revealing it. However, many websites do not allow this and in this snippet just for fun we have put an image behind the door and gone to the website only once it is fully open. This is just to demonstrate possibilities. There may be a better way of doing it - let's hope so.
let page = "https://stackoverflow.com";
let button = document.getElementById('opendoor');
let door = document.querySelector('.door');
let face = document.querySelector('.face');
//document.querySelector("#target").src = page;//only do this if the target website lets you have an iframe
button.addEventListener('click', function () {
door.classList.add('open');
button.style.display = 'none';
document.body.style.animation = 'none';
});
face.addEventListener('webkitAnimationEnd', gotopage);//webkit still needed for some browsers
face.addEventListener('animationEnd', gotopage);
function gotopage() {
document.getElementById('doorwrapper').style.display = 'none';
window.location= page;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #222;
width: 100%;
height: 100vh;
overflow: hidden;
perspective: 100vw;
overflow: hidden;
animation: squiggly-anim 0.4s infinite;
}
#doorwrapper {
position: absolute;
top: -10px;
left: -10px;/* attempt to stop shakiness at margin black against white */
display: flex;
width: calc(100vw + 20px);
height: calc(100vh + 20px);
background-color: transparent;
z-index: 99999;
}
#keyframes squiggly-anim {
0% {
filter: url("#squiggly-0");
}
25% {
filter: url("#squiggly-1");
}
50% {
filter: url("#squiggly-2");
}
75% {
filter: url("#squiggly-3");
}
100% {
filter: url("#squiggly-4");
}
}
#doorwrapper .door {
position: absolute;
width: 100px;
height: 200px;
left: calc(50% - 50px);
top: calc(50% - 100px);
box-shadow: inset 0 -5px 0 0 #222, inset 0 0 0 1px #fff, 0 5px 0 0 #222, 0 0 0 100vw #222;
perspective: 500px;
transform-style: preserve-3d;
animation-fill-mode: forwards;
transform: translateZ(-1px);
}
#doorwrapper .door.open {
animation: scaling 5s linear 1;
}
#keyframes scaling {
0% {
transform: translateZ(0vw);
opacity: 1;
}
50% {
transform: translateZ(100vw);
opacity: 1;
}
95% {
transform: translateZ(200vw);
opacity: 1;
}
100% {
transform: translateZ(300vw);
opacity: 0;
}
}
#doorwrapper .door:after {
content: "";
position: absolute;
width: 200vw;
height: 100vw;
left: -50vw;
bottom: 5px;
box-shadow: 0 1px 0 0 #fff;
z-index: -1;
}
#doorwrapper .door .face {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100% - 4px);
transform-style: preserve-3d;
box-shadow: inset 0 0 0 1px #fff;
background: #222;
transform-origin: left;
animation-fill-mode: forwards;
}
#doorwrapper .door.open .face {
animation: swing 5s ease-in-out 1;
}
#doorwrapper .door .face:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
box-shadow: 0 0 0 1px #fff;
border-radius: 100%;
right: 10px;
top: calc(50% - 5px);
transform-style: preserve-3d;
transform: translateZ(6px);
backface-visibility: hidden;
background: #222;
}
#doorwrapper .door .face:after {
content: "";
position: absolute;
width: 4px;
height: 2.5px;
box-shadow: 0 0 0 1px #fff;
opacity: 0.75;
border-radius: 0;
right: 10px;
top: calc(50% - 1.25px);
transform-style: preserve-3d;
transform: translateZ(2.5px) rotateY(90deg);
backface-visibility: hidden;
background: #222;
}
#keyframes swing {
15% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-125deg) translateZ(-2px);
}
75% {
transform: rotateY(-125deg);
}
100% {
transform: rotateY(-125deg);
}
}
#doorwrapper .door .face .right {
position: absolute;
width: 10%;
background: #222;
height: 100%;
top: 0;
right: -10%;
transform-origin: left;
transform: rotateY(90deg);
box-shadow: inset 0 0 0 1px #fff;
}
<div id="doorwrapper">
<div class='door'>
<div class='face'>
<div class='right'></div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.01" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs>
</svg>
<button id="opendoor" style="position: absolute; top: 10px; left: 10px; color: white; background-color: red; z-index: 99999;">Open the door</button>
<!-- YOUR WEBSITE - OR IFRAME WITH THE TARGET WEBSITE IN IT (OR WILL GO TO WEBSITE ON END OF ANIMATION IF IFRAME NOT ALLOWED -->
<!-- <iframe id="target" width=100% height=100% src=""></iframe> -->
<img id="mywebsite" src="https://i.stack.imgur.com/qsQbR.jpg" style="position: relative; top: 0; left: 0; z-index: 0; width: 100vw; height: auto;"/>