Bootstrap snippet: Login form with css3 animation

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: form,login,user



<div class="container bootstrap snippet"> <form id="login-form" class="form-horizontal" style="width:58%;"> <div class="col-md-3 text-center"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" id="avtar" /> <hr/> inspired in <a style="color:#dddddd" href="http://www.jquery2dotnet.com/2013/01/cool-login-page-with-gravatar-html5-and.html">jquery2dotnet</a> </div> <div class="col-md-6"> <div class="form-group"> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <button class="btn btn-primary" type="submit">Log in</button> </div> </form> </di>
body { font-family: sans-serif; background-color: #108a93; } #login-form { position: absolute; left: 50%; top: 30%; margin-left: -110px; margin-top: -75px; -webkit-animation: login 1s ease-in-out; -moz-animation: login 1s ease-in-out; -ms-animation: login 1s ease-in-out; -o-animation: login 1s ease-in-out; animation: login 1s ease-in-out; } #avtar{ border-radius: 6px; width:150px; } /* CSS Animations */ @keyframes "login" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; margin-top: -50px; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: -75px; } } @-moz-keyframes login { 0% { filter: alpha(opacity=0); opacity: 0; margin-top: -50px; } 100% { filter: alpha(opacity=100); opacity: 1; margin-top: -75px; } } @-webkit-keyframes "login" { 0% { filter: alpha(opacity=0); opacity: 0; margin-top: -50px; } 100% { filter: alpha(opacity=100); opacity: 1; margin-top: -75px; } } @-ms-keyframes "login" { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; margin-top: -50px; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: -75px; } } @-o-keyframes "login" { 0% { filter: alpha(opacity=0); opacity: 0; margin-top: -50px; } 100% { filter: alpha(opacity=100); opacity: 1; margin-top: -75px; } }
Dey-Dey

Login form with css3 animation

Dey-Dey
  Jul 4th 2014, 17:55
3.9K Views