Using key-frames to create a sign-up box with changing background colors.

Howdy, developer! I believe you're doing great. In this short article, we'll look at how to use CSS keyframes to construct an HTML sign-up form with changeable background colors. I'll make an effort to be as simple and clear as I can. I hope you will like it. Now let's get started.

1.Creating the sign-up form.

We need to first of all create a sign-up form using html. Our form will be having:

Surname
First Name
Second name
Email
Password
Confirm password

Below is our Html code for the page structure.

<!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">
    <title>Sign up</title>
</head>
<body>
    <form>
<div class="box">
    <h1>Sign up</h1><br>

        <label>Surname:<span>*</span></label>
        <input type="text"  placeholder=""><br>
        <label>First name:<span>*</span></label>
        <input type="text"  placeholder=""><br>
        <label>Last name:<span>*</span></label>
        <input type="text" placeholder="" ><br>
        <label>Email address:</label>
        <input type="email"  placeholder="" required><br>
        <label>Password:<span>*</span></label>
        <input type="password"  placeholder="" required><br>
        <label>Confirm Password:</label>
        <input type="password"  placeholder="" required><br>
        <input type="button" value="Sign up">
<p>By clicking sign up, you agree to our <br>
        <a href="#">Terms and conditions</a> and <a href="#">privacy policy</a>
<p class="para-2">Already have an account? <a href="login.html">Log in</a></p>

</form>    
</body>
</html>

2. Styling Our Html Page.

In this section, we will now style our html page to give it a nice look.

2.1 Linking CSS to Html using external linking.

We need link our Css code to our html page by adding the link inside our html head tags as shown below:

<link rel="stylesheet" type="text/css" href="style.css"/>

Recall that this should be added inside our html head tags.

2.2 Adding Css to Html.

In this sub-section, we need to add the styling of our page as follows:


body{
    background: aqua;
}
.box{
    border-radius: 3px;
    position: relative;
    width: 350px;
    height: 850px;
    background: #abcd00;
    margin: auto;
}
span{
    color: red; 
    font-weight:bold;

}
h1{
    text-align: center;
    padding-top: 15px;
}
form label{
    display: flex;
    margin-top: 50px;
    font-size: 18px;
    margin-left: 5%;
}
form input{
    width: 75%;
    padding: 7px;
    border: none;
    border: 1px solid gray;
    border-radius: 6px;
    outline: none;
    margin-left: 5%;
}
input[type="button"]{
    width: 320;
    height: 35px;
    margin-top: 20px;
    border: none;
    background-color: #49c1a2;
    color: wheat;
    font-size: 18px;
}
p{
    text-align: center;
    padding-top: 20px;
    font-size: 15px;
}
.para-2{
    text-align: center;
    color: black;
    font-size: 15px;
    margin-top: 10px;

}
.para-2 a{
    color:#5f49c1 ;
}

2.3 Adding keyframes.

This is the section where we add keyframes to customize our sign-up box.
We will achieve this by adding keyframe properties to the sign-up block in our Css file.
With this i mean that,we will add keyframe properties inside the block of .box class in Css.

2.3.0 Adding keyframe properties.

In this sub-section,we need to introduce some properties that will be used by our keyframes. These properties include name, duration, delay and iteration function.

Note: They need to be added inside our .box properties in Css.

Here is what we will have:

    animation-name: myframe; /*Name of our key-frame animation.*/
    animation-duration: 5s;  /*How long our animations should last.*/
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; /*How our keyframe colors will loop.*/
    animation-play-state: running;
    animation-direction: alternate-reverse;
    animation-delay: 0s;  /*How long it will take before our animation is triggered.*/

##2.2.1 Adding Css to keyframe animations.
The basic syntax for CSS keyframes is:

@keyframes animationname{keyframesselector{css-styles;}}

For our case, we will add the following lines of code:

@keyframes myframe{
    50%{
        background: red;
    }
    100%{
        background: skyblue;
    }
}

I changed the backdrop color to a different color at 50% of the animation. This indicates that the backdrop color will start to switch from aqua (its initial value) to red;another when the animation nears its halfway point.

I've set a new color;skyblue to appear at 100%, the point where the animation ends, so that as it gets closer to that point, it will start to transition to that color.

That is how we create varying background colors using keyframes. I believe you have enjoyed.✌️
Thank you.

Blog