Animated Login Page In HTML CSS | Example and Source Code

we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code.

Animated Login Page In HTML CSS | Example and Source Code
Html and css Login Page

How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code.

If any website has membership or user feature, then they probably have a separate login page. Mostly other useful links like sign up, forgot passwords, etc page’s direction available on the login page. If you have a login page or planning tocreate then you take inspiration from this post.

Today you will learn to create a login page with image and animation using pure HTML & CSS. There is an image, a form, and some texts, they all have an animation effect. You can modify it according to your requirement. I know this is simple work, but one of my visitors asks me for creating this.

So, Today I am sharing Animated Login Page In HTML CSS. I have used pure CSS for creating all theanimation effects, delay, etc. You can switch the position of form and image very easily, you just have to change values or change the class name. The image I have used in this design is very large in size, maybe you have to wait sometime see live.

If you are thinking now how this animated login pageactually is, then see the preview given below.

Animated Login Page In HTML CSS Source Code

Before sharing source code, let’s talk about it. Simply I have created the main div with class name ‘container‘. After that, I have places headings, form, image, etc.  In all elements, I have put an extra class for animation-delay. In animation-delay, I have just increased the time step by step. Like if the first class has 2s of animation delay, then the second one has 2.1s.

As you can see the animation in the preview, for creating this I have used CSS animation-delay and @keyframe (info) properties.  All the things are ver basics part of HTML and CSS. There is nothing special to explain, You will understand easily after getting the codes.

For creating this page design you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

​
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated Login Page</title>
  <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<div class="container">
  <div class="left-section">
    <div class="header">
      <h1 class="animation a1">Welcome Back!</h1>
      <h4 class="animation a2">Log in for entering your membership dashboard.</h4>
    </div>
    <div class="form">
      <input type="email" class="form-field animation a3" placeholder="Username">
      <input type="password" class="form-field animation a4" placeholder="Password">
      <p class="animation a5"><a href="#">Forgot Password</a></p>
      <button class="animation a6">LOGIN</button>
    </div>
  </div>
  <div class="right-section"></div>
</div>
  
</body>
</html>

​

Style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

* {
  box-sizing: border-box;
}
body {
  font-family: 'Rubik', sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  height: 100vh;
}
.left-section {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  -webkit-animation-name: left-section;
          animation-name: left-section;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.right-section {
  flex: 1;
  background: linear-gradient(to right, #f50629 0%, #fd9d08 100%);
  transition: 1s;
  background-image: url(https://webdevtrick.com/wp-content/uploads/login-page-image.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.header > h1 {
  margin: 0;
  color: #f50629;
}
.header > h4 {
  margin-top: 10px;
  font-weight: normal;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.4);
}
.form {
  max-width: 80%;
  display: flex;
  flex-direction: column;
}
.form > p {
  text-align: right;
}
.form > p > a {
  color: #000;
  font-size: 14px;
}
.form-field {
  height: 46px;
  padding: 0 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-family: 'Rubik', sans-serif;
  outline: 0;
  transition: .2s;
  margin-top: 20px;
}
.form-field:focus {
  border-color: #0f7ef1;
}
.form > button {
  padding: 12px 10px;
  border: 0;
  background: linear-gradient(to right, #f50629 0%, #fd9d08 100%);
  border-radius: 3px;
  margin-top: 10px;
  color: #fff;
  letter-spacing: 1px;
  font-family: 'Rubik', sans-serif;
}
.animation {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
 
.a1 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.a2 {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
.a3 {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
.a4 {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
.a5 {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.a6 {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
@keyframes move {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes left-section {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    padding: 20px 40px;
    width: 440px;
  }
}

That’s It. Now you have successfully created Animated Login Page In HTML CSS Example and Source Code. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting