Koushikphy · May 19, 2020 06:50
diff --git a/animatedLogin.html b/animatedLogin.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        label {
            display: block;
        }

        .field {
            width: 100%;
            margin: 0 auto;
            position: relative;
            border-bottom: 1px solid #afafaf;
            margin: 4rem auto 1rem;
            transition: 400ms;
        }

        .label {
            color: #000000;
            font-size: 1.2rem;
        }

        .input {
            outline: none;
            border: none;
            overflow: hidden;
            margin: 0;
            width: 100%;
            padding: 0.25rem 0;
            background: none;
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            transition: border 400ms;
        }

        .input:valid {
            color: yellowgreen;
        }

        .input:invalid {
            color: orangered;
        }

        /* Border animation */

        .field::after {
            content: "";
            position: relative;
            display: block;
            height: 4px;
            width: 100%;
            background: #d16dff;
            transform: scaleX(0);
            transform-origin: 0%;
            opacity: 0;
            transition: all 400ms ease;
            top: 2px;
        }

        .field:focus-within {
            border-color: transparent;
        }

        .field:focus-within::after {
            transform: scaleX(1);
            opacity: 1;
        }

        /* Label animation */

        .label {
            z-index: -1;
            position: absolute;
            transform: translateY(-1.5rem);
            transform-origin: 0%;
            transition: transform 400ms;
        }

        .field:focus-within .label, .input:not(:placeholder-shown) + .label {
            transform: scale(0.8) translateY(-4rem);
            opacity: 1;
        }

    </style>
 </head>
 <body>

    <div class="field">
      <input type="email" name="email" class="input" placeholder=" " />
      <label for="email" class="label">Email</label>
    </div>

    <div class="field">
      <input type='text' name="email" class="input" placeholder=" ">
      <label for="password" class="label">Password</label>
    </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	label {
	display: block;
	}

	.field {
	width: 100%;
	margin: 0 auto;
	position: relative;
	border-bottom: 1px solid #afafaf;
	margin: 4rem auto 1rem;
	transition: 400ms;
	}

	.label {
	color: #000000;
	font-size: 1.2rem;
	}

	.input {
	outline: none;
	border: none;
	overflow: hidden;
	margin: 0;
	width: 100%;
	padding: 0.25rem 0;
	background: none;
	color: white;
	font-size: 1.2em;
	font-weight: bold;
	transition: border 400ms;
	}

	.input:valid {
	color: yellowgreen;
	}

	.input:invalid {
	color: orangered;
	}

	/* Border animation */

	.field::after {
	content: "";
	position: relative;
	display: block;
	height: 4px;
	width: 100%;
	background: #d16dff;
	transform: scaleX(0);
	transform-origin: 0%;
	opacity: 0;
	transition: all 400ms ease;
	top: 2px;
	}

	.field:focus-within {
	border-color: transparent;
	}

	.field:focus-within::after {
	transform: scaleX(1);
	opacity: 1;
	}

	/* Label animation */

	.label {
	z-index: -1;
	position: absolute;
	transform: translateY(-1.5rem);
	transform-origin: 0%;
	transition: transform 400ms;
	}

	.field:focus-within .label, .input:not(:placeholder-shown) + .label {
	transform: scale(0.8) translateY(-4rem);
	opacity: 1;
	}

	</style>
	</head>
	<body>

	<div class="field">
	<input type="email" name="email" class="input" placeholder=" " />
	<label for="email" class="label">Email</label>
	</div>

	<div class="field">
	<input type='text' name="email" class="input" placeholder=" ">
	<label for="password" class="label">Password</label>
	</div>

	</body>
	</html>