<div class="container">

        <div class="before-animation">

            <label class="text" for="toggle">Register</label>

            <div class="line"></div>

        </div>

        <div class="first">

        <h2>Register</h2>

        <input class="itext" type="text" placeholder="First Name" required>

        <input class="itext" type="text" placeholder="Last Name"required>

        </div>

        <div class="second">

        <input class="itext" type="email" placeholder="Email" required>

        <p class="gender"> Gender</p>

        <input name="gender" class="iradio" type="radio">Male

        <input name="gender" class="iradio" type="radio">Female

        </div>

        <div class="third">

        <button class="submit">Submit</button>

        <p class="extra">Already have an account <a href="#">Login</a> </p>

        </div>

    </div>

 --expand-time: 5s;

 --dissappear-time: 5s;

}

body{

    background: lightblue;

    background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');

}

.container{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    width: 360px;

    height: 280px;

    background: white;

    text-align: center;

    border-radius: 5px;

    animation: change var(--expand-time) linear;

    animation-fill-mode: forwards;

    animation-play-state: paused;

}

h2{

    font-size: 40px;

    font-family: sans-serif;

}

.itext{

    display: block;

    padding: 7px;

    width: 220px;

    margin: 10px 0px 0px 70px;

}

.gender{

    font-size: 20px;

    font-family: sans-serif;

    font-weight: 500;

}

.submit{

    display: block;

    width: 100px;

    height: 50px;

    border: none;

    background-color: #85FFBD;

    background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

    border-radius: 5px;

    margin: 40px 0px 0px 130px;

}

.extra{

    font-family: sans-serif;

}

.first{

    margin: -140px 0px 0px 0px;

    transform: rotateX(90deg);

    animation: unfold 5s calc(var(--expand-time) + var(--dissappear-time)) linear;  

    animation-fill-mode: forwards;

}

.second{

    transform: rotateX(90deg);

    animation: unfold 5s calc(var(--expand-time) + var(--dissappear-time)) linear;  

    animation-fill-mode: forwards;

}

​

.third{

    transform: rotateX(90deg);

    animation: unfold 5s calc(var(--expand-time) + var(--dissappear-time)) linear;  

    animation-fill-mode: forwards;

}

@keyframes change{

    0%{

     width: 360px;

     height: 280px;

    }

    100%{

     width: 360px;

     height: 500px;

    }

}

.text{

    font-size: 40px;

    font-family: sans-serif;

        font-weight: bold;

    position: relative;

    top: 120px;

    animation: dissappear var(--dissappear-time) var(--expand-time) linear;

    animation-fill-mode: forwards;

}

.line{

    width: 95px;

    height: 3px;

    background: grey;

    margin: 100px 0px 0px 0px;

    animation: dissappear2 var(--dissappear-time) var(--expand-time) linear;

    animation-fill-mode: forwards;

}

.line:after{

    content: '';

    display: block;

    width: 98px;

    height: 3px;

    background: grey;

    margin: 0px 0px 0px 262px;

    animation: dissappear2 var(--dissappear-time) var(--expand-time) linear;

    animation-fill-mode: forwards;

}

.visually-hidden{

    opacity: 0;

}

#toggle:checked ~ .container{

    animation-play-state: running;

}

@keyframes unfold{

    0%{

        transform: rotateX(90deg);

    }

    50%{

        transform: rotateX(45deg);

    }

    100%{

        transform: rotateX(0deg);

    }

}

@keyframes dissappear{

    0%{

        color: black;

    }

    100%{

        color: white;

        user-select: none;

        z-index: -11;

    }

}

@keyframes dissappear2{

    0%{

        background: grey;

    }

    100%{

        background: white;

        z-index: -11;

    }

}