Animated Form
How do I make an animated form?
Registration form with pure CSS animations. Idea by Gal Shir.. What is a animated form? How do you make a animated form? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.
Animated Form Previews
Animated Form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Form</title> <head> <meta charset="UTF-8"> <title>AnimaForm</title> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <main> <div class="buttons login-button-active" data-action="animated"> <button class="login-button"> <span class="log-link login-button-active" data-action="animated">Login</span> <span class="login-underline login-button-active" data-action="animated"></span> </button> <button class="signup-button"> <span class="sign-link" data-action="animated">Sign Up</span> <span class="signup-underline login-button-active" data-action="animated"></span> </button> </div> <div class="forms"> <form class="login-form login-button-active" action="#" method="post" data-action="animated"> <fieldset> <legend>Please, enter your email and password for login.</legend> <label for="login-email">E-mail</label> <input id="login-email" type="email" name="email" required> <label for="login-password">Password</label> <input id="login-password" type="password" name="password" required> </fieldset> <input type="submit" value="Login"> </form> <form class="signup-form" action="#" method="post" data-action="animated"> <fieldset> <legend>Please, enter your email, password and password confirmation for sign up.</legend> <label for="signup-email">E-mail</label> <input id="signup-email" type="email" name="email" required> <label for="signup-password">Password</label> <input id="signup-password" type="password" name="password" required> <label for="signup-confirm-password">Confirm password</label> <input id="signup-confirm-password" type="password" name="password" required> </fieldset> <input type="submit" value="Continue"> </form> </div> </main>
</body> <script src="js/index.js"></script>
</body>
</html>Animated Form - Script Codes CSS Codes
/* Reset */
* { margin: 0; padding: 0; vertical-align: baseline; box-sizing: border-box; border: 0; outline: 0;
}
/* General */
body { width: 100%; font-family: Roboto, sans-serif; background: #3b4465;
}
button { position: relative; width: 160px; text-transform: uppercase; font-size: 14px; background-color: transparent;
}
form { position: relative; width: 260px; height: 280px; padding: 20px; background: #d7e7f1; border-radius: 5px;
}
form label, form input { display: block; opacity: 0;
}
legend { position: absolute; top: 0; left: -10000px;
}
label { padding-top: 15px; font-size: 14px; color: #a1b4b4; letter-spacing: 0.5px;
}
input:not([type="submit"]) { width: 220px; margin: 5px auto 0; padding: 0 15px; line-height: 40px; font-size: 14px; color: #3b4465; background: #eef9fe; border: 1px solid #cddbef; border-radius: 2px;
}
input[type="submit"] { float: right; width: 120px; margin-top: 30px; line-height: 40px; font-size: 18px; border-radius: 20px;
}
/* Buttons and Inputs */
.buttons,
.forms { display: flex; flex-flow: row nowrap; justify-content: center; width: 550px; margin: 0 auto;
}
.buttons { height: 100px; padding-top: 70px; text-align: center;
}
.forms { padding-top: 50px;
}
.log-link,
.sign-link { cursor: pointer; color: #bbb;
}
.log-link.login-button-active,
.sign-link.signup-button-active { cursor: default; color: #fff;
}
.login-underline,
.signup-underline { position: absolute; top: 35px; left: 30px; height: 2px; width: 100px; opacity: 0; background: #c8dfed;
}
.login-underline.login-button-active { animation: loginUnderlineActive .2s linear .1s forwards; transform-origin: right;
}
.login-underline.signup-button-active { animation: loginUnderlineInactive .3s linear forwards; transform-origin: right;
}
.signup-underline.signup-button-active { animation: signupUnderlineActive .2s linear .1s forwards; transform-origin: left;
}
.signup-underline.login-button-active { animation: signupUnderlineInactive .3s linear forwards; transform-origin: left;
}
.login-button-active { animation: buttonsMoveToRight .3s linear forwards;
}
.signup-button-active { animation: buttonsMoveToLeft .3s linear forwards;
}
.login-form.login-button-active label,
.login-form.login-button-active input { animation: fielsetSlideToRight .5s linear 0.25s forwards;
}
.signup-form.signup-button-active label,
.signup-form.signup-button-active input { animation: fieldsetSlideToLeft .5s linear 0.25s forwards;
}
.login-form input[type="submit"] { color: #fbfdff; background: #a7e245;
}
.signup-form input[type="submit"] { color: #a7e245; background: #fbfdff; box-shadow: inset 0 0 0 2px #a7e245;
}
.login-form { animation: loginToBottom .4s linear forwards;
}
.signup-form { animation: signUpToBottom .4s linear forwards;
}
.login-form.login-button-active { animation: loginToTop .4s linear forwards;
}
.signup-form.signup-button-active { animation: signUpToTop .4s linear forwards;
}
/* Animations */
@keyframes loginUnderlineActive { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; }
}
@keyframes signupUnderlineActive { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; }
}
@keyframes loginUnderlineInactive { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 1; }
}
@keyframes signupUnderlineInactive { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 1; }
}
@keyframes buttonsMoveToRight { 0% { transform: translate(0); } 100% { transform: translate(50px); }
}
@keyframes buttonsMoveToLeft { 0% { transform: translate(0); } 100% { transform: translate(-50px); }
}
@keyframes fielsetSlideToRight { 0% { transform: translate(-15px); opacity: 0; } 100% { transform: translate(0); opacity: 1; }
}
@keyframes fieldsetSlideToLeft { 0% { transform: translate(15px); opacity: 0; } 100% { transform: translate(0); opacity: 1; }
}
@keyframes loginToBottom { 0% { transform: translate(100px); z-index: 10; background-color: #fff; } 49% { transform: translate(0); z-index: 10; } 50% { transform: translate(0); z-index: 1; } 100% { transform: translate(100px, 20px); z-index: 1; background-color: #d7e7f1; }
}
@keyframes signUpToBottom { 0% { transform: translate(-100px); z-index: 10; height: 360px; background-color: #fff; } 49% { transform: translate(0); z-index: 10; } 50% { transform: translate(0); z-index: 1; } 100% { transform: translate(-100px, 20px); z-index: 1; height: 280px; background-color: #d7e7f1; }
}
@keyframes loginToTop { 0% { transform: translate(100px, 20px); z-index: 1; background-color: #d7e7f1; } 49% { transform: translate(0); z-index: 1; } 50% { transform: translate(0); z-index: 10; } 100% { transform: translate(100px); z-index: 10; background-color: #fff; }
}
@keyframes signUpToTop { 0% { transform: translate(-100px, 20px); z-index: 1; background-color: #d7e7f1; } 25% {height: 280px;} 49% { transform: translate(0); z-index: 1; } 50% { transform: translate(0); z-index: 10; } 100% { transform: translate(-100px); z-index: 10; height: 360px; background-color: #fff; }
}
Animated Form - Script Codes JS Codes
var buttons = document.querySelector('.buttons');
var loginButton = document.querySelector('.log-link');
var signupButton = document.querySelector('.sign-link');
var activeElements = document.querySelectorAll('[data-action="animated"]');
buttons.addEventListener('click', switcher);
function switcher(e) { if(e.target == loginButton) { for (var i = 0; i < activeElements.length; i++) { activeElements[i].classList.remove('signup-button-active'); activeElements[i].classList.add('login-button-active'); } } else if(e.target == signupButton) { for (var i = 0; i < activeElements.length; i++) { activeElements[i].classList.remove('login-button-active'); activeElements[i].classList.add('signup-button-active'); } }
}
// OR
/*var loginButton = document.querySelector('.log-link');
var signupButton = document.querySelector('.sign-link');
var activeElements = document.getElementsByName('animated');
loginButton.onclick = function() { for (var i = 0; i < activeElements.length; i++) { activeElements[i].classList.remove('signup-button-active'); activeElements[i].classList.add('login-button-active'); }
}
signupButton.onclick = function() { for (var i = 0; i < activeElements.length; i++) { activeElements[i].classList.remove('login-button-active'); activeElements[i].classList.add('signup-button-active'); }
}*/
| Developer | Maxim Konoval |
| Username | Said_FD |
| Uploaded | September 16, 2022 |
| Rating | 3.5 |
| Size | 3,485 Kb |
| Views | 38,456 |
Do you need developer help for Animated Form?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Maxim Konoval (Said_FD) Script Codes
| Name | Size |
| Tactical Monkey | 2,889 Kb |
| SVG Scalable Text | 1,451 Kb |
| CSS Transforms Test | 2,455 Kb |
| CS-Service Landing Page | 6,657 Kb |
| Vanilla CSS Accordion and Responsive Tables | 3,826 Kb |
| A Pen by Maxim Konoval | 1,609 Kb |
| Responsive Price List | 11,134 Kb |
| CRM Table Test | 7,579 Kb |
| Fully Flexbox Landing Page | 9,592 Kb |
| Brutal Responsive Landing Page Prototype | 5,482 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
| Dribbble Template | ExtremelyGinger | 2,204 Kb |
| Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| A Different Type of Gallery | DonPage | 2,950 Kb |
| Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
| 12 DAYS OF XMAS | Proto78 | 2,313 Kb |
| Shape Outside - Polygon | Stacy | 3,954 Kb |
| Classy Blockquote Styling | Andrewwright | 3,212 Kb |
| Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!