NOW THE PROBLEM:
I designed the code such that:
when I click on the body (or document) of the second page, the first page moves to the left (-100vw) and then sits on the second page (0vw, z-index:1)
when I click on the body (or document) of the first page, the second page moves to the right (100vw) and then sits on the first page (0vw, z-index:1)
(I used keyframes in CSS).
When you view the effect in your browser you'll notice that at some point while animating from one page to the other, there will be a "jumpy" effect.
At a point, the animation flows smoothly, then, at another point, it gives this "jumpy" effect
(and that's really annoying)
Please, someone, help me fix this code by removing the "jumpy" effect to give the desired transition.
Below are the HTML,CSS,JS files.
<body>
<section id="pg_one">
<span>
<label for="txt">Enter name here: </label>
<input type="text" id="txt"/>
</span>
</section>
<section id="pg_two">
<span>
<label for="pwd">Choose password: </label>
<input type="password" name="" id="pwd"/>
</span>
</section>
</body>
*,
*::after,
*::before{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
overflow: hidden;
}
section#pg_one{
display: grid;
align-items: center;
justify-items: center;
width: 100%;
height: 100%;
position: absolute;
background-color: #5944f0;
}
.pg_one{
animation-name: p1off;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p1off {
0%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
50%{
-webkit-transform: translateX(-100vw);
-ms-transform: translateX(-100vw);
transform: translateX(-100vw);
}
100%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 1;
}
}
section#pg_two{
position: absolute;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
background-color: #d0277f;
}
.pg_two{
animation-name: p2off;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes p2off {
0%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
50%{
-webkit-transform: translateX(100vw);
-ms-transform: translateX(100vw);
transform: translateX(100vw);
}
100%{
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 1;
}
}
var pg_one = document.getElementById("pg_one");
var pg_two = document.getElementById("pg_two");
pg_one.onclick=()=>{
pg_two.className = "pg_two";
pg_one.className = "";
}
pg_two.onclick=()=>{
pg_one.className = "pg_one";
pg_two.className = "";
}
What I have tried:
I have tried manipulating the z-index in the CSS keyframes.