Form animation in HTML5, JS and CSS with free source code

Table of Contents

Introduction

Form animation project deals with creating an animated login form. It is coded in HTML5, CSS, and JavaScript.

In this tutorial, we will be creating an animated login form. First, we need to create a folder with HTML, CSS, and js files. We are not using images in this project. We are using a container that includes all the parts. We will create a simple login form. The form that we use to login into the system. We will create a login form using HTML, style with CSS, and animate using Javascript. When you try to input email and password you will notice an form animation on the word email and password. The button shows a click hover animation when pressed. See the screenshot below.

Form animation html

index.html

HTML will be used for creating a login form page. Have a look at the html code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>Form Animation</title>
</head>
<body>
    <div class="container"> 
        <h1>Please Login</h1>
        <form>
            <div class="form-control">
                <input type="text" required>
                <label>Email</label>
            </div>

            <div class="form-control">
                <input type="password" required>
                <label>Password</label>
            </div>

            <button class="btn">Login</button>
            <p class="text">Don't have an account?<a href="#"> Register</a></a></p>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

Form animation CSS

We will be using CSS for styling the entire login form making transparent, adding transition, positioning the form elements and many other. Check the code below.

style.css

@import url('https://fonts.googleapis.com/css?Muli&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: steelblue;
    color: #fff;
    font-family: 'Muli', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; 
    overflow: hidden;
    margin: 0;
}

.container {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 40px;
    border-radius: 5px;
}

.container h1 {
    text-align: center;
    margin-bottom: 30px;
}

.container a {
    text-decoration: none;
    color: lightblue;
}
.container p {
    text-align: center;
     
}

.btn {script.js
    cursor: pointer;
    display: inline-block;
    width: 100%;
    background: lightblue;
    padding: 15px;
    font-family: inherit;
    font-size: 16px;
    border: 0;
    border-radius: 5px;
}

.btn:focus {
    outline: 0;
}

.btn:active {
    transform: scale(0.95);
}

.text {
    margin-top: 30px;
}

.form-control {
    position: relative;
    margin: 20px 0 40px;
    width: 300px;
}

.form-control input {
    background-color: transparent;
    border: 0;
    border-bottom: 2px #fff solid;
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    color: #fff;
}

.form-control input:focus, 
.form-control input:valid {
    outline: 0;
    border-bottom-color: lightblue;
}

.form-control label {
    position: absolute;
    top: 15px;
    left: 0;
}

.form-control label span {
    display: inline-block;
    font-sWe will be using CSS for styling the entire login form. ize: 18px;
    min-width: 5px;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
    color: lightblue;
    transform: translateY(-30px);
}

Form animation JS

The Javascript code is added for making animation. The label word email and password will show a wave transition when clicked for input. Animation speed can be controlled using javascript code. Check the js code below.

script.js

const labels = document.querySelectorAll('.form-control label')

labels.forEach(label => {
    label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx * 70}ms">${letter}</span>`)
        .join('')
})

Although the code is provided in this tutorial. You can click the button below to get the source code of this project.

DOWNLOAD