.animate header {
    position: relative;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-name: login-header;
            animation-name: login-header;
}

.animate form {
    position: relative;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-name: login-form;
            animation-name: login-form;
}

#loginSection .message {
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-name: login-message;
            animation-name: login-message;
}

.animate form .controls {
    position: relative;
    -webkit-animation-duration: .5s;
            animation-duration: .5s;
    -webkit-animation-name: login-controls;
            animation-name: login-controls;
}

footer {
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: login-footer;
            animation-name: login-footer;
}

@keyframes login-header {
    from { left: 50px; opacity: 0; }
    to { left: 0; opacity: 1; }
}
@-webkit-keyframes login-header {
    from { left: 50px; opacity: 0; }
    to { left: 0; opacity: 1; }
}
@keyframes login-form {
    from { left: 50px; opacity: 0; }
    25% { left: 50px; opacity: 0; }
    to { left: 0; opacity: 1; }
}
@-webkit-keyframes login-form {
    from { left: 50px; opacity: 0; }
    25% { left: 50px; opacity: 0; }
    to { left: 0; opacity: 1; }
}
@keyframes login-message {
    from { left: 80%; opacity: 0; }
    to { left: 100%; opacity: 1; }
}
@-webkit-keyframes login-message {
    from { left: 80%; opacity: 0; }
    to { left: 100%; opacity: 1; }
}
@keyframes login-controls {
    from { left: 50px; opacity: 0; }
    40% { left: 50px; opacity: 0; }
    to { left: 0; opacity: 1; }
}
@-webkit-keyframes login-controls {
    from { left: 50px; opacity: 0; }
    40% { left: 50px; opacity: 0; }
    to { left: 0; opacity: 1; }
}
@keyframes login-footer {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-webkit-keyframes login-footer {
    from { opacity: 0; }
    to { opacity: 1; }
}
