Animated Login Form with jQuery & CSS3

Today I am going to share a simple animated login form which you can easily integrate in your web projects.

List of Animations you can use in this login form

FLIPPERS (WEBKIT, FIREFOX & IE10 ONLY)

FADING ENTRANCES

FADING EXITS

BOUNCING ENTRANCES

BOUNCING EXITS

ROTATING ENTRANCES

ROTATING EXITS

LIGHTSPEED

LIGHTSPEED

Jquery Code for Animation

jQuery(document).ready(function(){

	var anievent = (jQuery.browser.webkit)? 'webkitAnimationEnd' : 'animationend';

	jQuery('.loginwrap').bind(anievent,function(){

		jQuery(this).removeClass('animate2 bounceInDown');

	});

	jQuery('#username,#password').focus(function(){

		if(jQuery(this).hasClass('error')) jQuery(this).removeClass('error');

	});
	jQuery('#loginform button').click(function(){

		if(!jQuery.browser.msie) {

			if(jQuery('#username').val() == '' || jQuery('#password').val() == '') {

				if(jQuery('#username').val() == '') jQuery('#username').addClass('error'); else jQuery('#username').removeClass('error');

				if(jQuery('#password').val() == '') jQuery('#password').addClass('error'); else jQuery('#password').removeClass('error');

				jQuery('.loginwrap').addClass('animate0 wobble').bind(anievent,function(){

					jQuery(this).removeClass('animate0 wobble');

				});

			} else {

				jQuery('.loginwrapper').addClass('animate0 fadeOutUp').bind(anievent,function(){

					jQuery('#loginform').submit();

				});

			}

			return false;

		}

	});

});

HTML Code

<div class="loginwrapper">

	<div class="loginwrap zindex100 animate2 bounceInDown">

	<h1 class="logintitle"><span class="iconfa-lock"><img src="lock.png" /></span> Sign In <span class="subtitle">Hello! Sign in to get you started!</span></h1>

        <div class="loginwrapperinner">

            <form id="loginform" action="" method="post">

                <p class="animate4 bounceIn"><input type="text" id="username" name="username" value="Username" placeholder="Username" /></p>

                <p class="animate5 flip"><input type="password" id="password" name="password" placeholder="Password" value="password" /></p>

                <p class="animate6 wobble"><button class="btn btn-default btn-block">Submit</button></p>

            </form>

        </div>

    </div>

    <div class="loginshadow animate3 fadeInUp"></div>

</div>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Live Demo & Download