输入类型到密码动画页面？

时间：2014-03-07 23:28:55

标签： html css animation

我在页面上创建一个登录表单，但是当页面加载时，它会在.2s中为页面上的所有元素设置动画。我发现了问题，但不明白为什么会发生这种情况或者它是如何发生的。

当我有一个输入字段为type =“text”时，页面加载很好没有奇怪的动画。 如果我有输入type =“password”页面动画。这是有史以来最奇怪的事情之一。这也只发生在chrome而不是firefox中。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Naperville Central Assassins</title>
    <link rel="stylesheet" href="assets/stylesheets/global/global.css" />
    <link rel="stylesheet" href="assets/stylesheets/fontello/css/fontello.css" />
</head>
<body>
<div id="Wrapper">
    <header id="Header">
        <div class="Container">
            <a href="index.php" class="Header-Logo Header-Link Left">Naperville Central Assassins 2014</a>
            <a href="index.php" class="Header-Link Left">Home</a>
            <a href="rules.php" class="Header-Link Left">Rules & FAQ</a>
            <a href="leaderboard.php" class="Header-Link Left">Leaderboards</a>
            <a href="register.php" class="Btn Btn-Danger Right">Create An Account</a>
            <a href="login.php" class="Header-Link Right Selected">Sign In</a>
        </div>
    </header>

    <main id="Main">
        <div class="Container">
            <div class="Card Form-Center">
                <h1 class="Form-Title">Sign In</h1>
                <hr />
                <form action="login.php" method="post">
                    <div class="Form-Field-Container">
                        <label for="email" class="Form-Legend">E-Mail:</label>
                        <input type="text" name="email" class="Form-Field" id="email" placeholder="E-Mail" />
                    </div>

                    <div class="Form-Field-Container">
                        <label for="password" class="Form-Legend">Password:</label>
                        <input type="password" id="password" name="password" class="Form-Field" placeholder="Password" />
                    </div>

                    <div class="Form-Actions">
                        <input type="hidden" name="token" value="<?php echo Token::generate(); ?>" />
                        <input type="submit" name="submit" class="Btn Btn-Success Left" value="Sign In" />
                        <input type="reset" name="reset" class="Btn Btn-Danger Left" value="Reset Form" />
                        <div class="Clear"></div>
                    </div>
                    <hr />
                    <div class="Form-Message Red">

                    </div>
                </form>
            </div>
        </div>

        <p class="Footer-Masthead">Created By Moussa Harajli.</p>
    </main>
</div>
</body>
</html>

的CSS：

/* Imports */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
/* Imports */

/* Layout */
html, body, #Wrapper {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    background-color: #EDEFF1;
    z-index: 1;
}

#Wrapper header {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;
    background-color: #FFF;
    box-shadow: 0 2px 2px -2px #EEE;
    border-bottom: 2px solid #CCC;
}

#Wrapper header .Container .Header-Logo {
    display: block;
    margin: 2px 10px;
    padding: 0 0 0 60px;
    width: auto;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    color: #000;
    background: url("../../images/logo.png") left center no-repeat;
    background-size: contain;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

#Wrapper header .Container .Header-Logo:hover {
    opacity: .8;
}

#Wrapper header .Container a.Btn {
    margin-top: 8px;
}

#Wrapper main {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 25px 0;
    width: 100%;
    height: auto;
}

#Wrapper main .Container {
    margin: 25px auto;
    padding: 0;
    min-height: 100%;
    background-color: transparent;
    box-shadow: 0 2px 2px -2px #EEE;
    border-radius: 3px;
}

.Footer-Masthead {
    text-align: center;
    font-size: 15px;
    margin: 0;
}
/* Layout */

/* Generic Classes */
.Container {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 1050px;
    height: auto;
    box-sizing: border-box;
}

.Right {
    float: right;
}

.Left {
    float: left;
}

.Clear {
    clear: both;
}

.Bold {
    font-weight: bold;
}

.Box-Sizing {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 28px;
}

h1.Section-Title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 0;
    padding: 10px 0;
    border-bottom: 1px solid #D9D9D9;
    color: #222;
}

.Paragraph-Indent {
    padding-left: 25px;
}

hr {
    display: block;
    margin: 10px 0;
    padding: 0;
    width: 100%;
    height: 1px;
    background-color: #CCC;
    border: none;
}

.Green {
    color: #27AE60;
}

.Red {
    color: #E74C3C;
}

.Box {
    margin-top: 25px;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
/* Generic Classes */

/* Buttons */
.Btn {
    display: block;
    margin: 0 10px 0 0;
    padding: 8px 12px;
    width: auto;
    height: auto;
    line-height: 16px;
    background-color: #333;
    color: #FFF;
    border-radius: 3px;
    font-weight: bold;
    border: none;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    cursor: pointer;
    outline: none;
}

.Btn:hover {
    opacity: .8;
    -moz-opacity: .8;
    -webkit-opacity: .8;
}

.Btn-Large {
    padding: 16px 20px;
    font-size: 22px;
}

.Btn-Long {
    text-align: center;
    padding: 14px 12px;
    font-size: 14px;
}

.Btn-Danger {
    background-color: #E74C3C;
}

.Btn-Success {
    background-color: #27AE60;
}

.Btn-Message {
    background-color: #0088cc;
}

.Btn-Disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.Btn-Disabled:hover {
    opacity: .5;
    cursor: default;
}
/* Buttons */

/* Links */
a {
    text-decoration: none;
}

a.Header-Link {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 18px;
    line-height: 47px;
    color: #777;
    border-bottom: 3px solid transparent;
}

a.Header-Link:hover {
    color: #000;
    background-color: #F6F6F6;
}

a.Header-Link.Selected {
    color: #E74C3C;
    border-bottom: 3px solid #E74C3C;
}
/* Links */

/* Forms */
fieldset {
    position: relative;
    display: block;
    margin: 10px 0;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
}

.Form-Legend {
    display: block;
    font-weight: bold;
    color: #000;
    font-size: 14px;
}

.Form-Field {
    display: block;
    margin: 6px 0;
    padding: 10px;
    width: 100%;
    height: auto;
    border: 1px solid #DDD;
    border-radius: 3px;
    box-sizing: border-box;
    outline: none;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.Form-Field:focus {
    border: 1px solid #E74C3C;
    box-shadow: 0 0 5px #E74C3C;
}

.No-Full {
    width: 25%;
    padding: 8px 10px;
}

.Form-Center {
    width: 400px;
    margin: 0 auto;
}

h1.Form-Title {
    text-align: center;
    color: #333;
}

.Form-Actions {
    margin-top: 10px;
}
/* Forms */

/* Tables */
.Table-Normal {
    position: relative;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}

.Table-Normal thead tr {
    background-color: #E74C3C;
    font-weight: bold;
}

.Table-Normal tr {
    margin: 0;
    padding: 0;
    width: 100%;
}

.Table-Normal tr td {
    margin: 0;
    padding: 4px 8px;
}

.Table-Normal tbody tr:nth-child(2) {
    background-color: #EEE;
}
/* Tables */

/* Jumbotron */
.Jumbotron {
    position: relative;
    display: block;
    margin: 20px 0;
    margin-top: 0;
    padding: 25px;
    width: 100%;
    height: auto;
    background-color: #FFF;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom: 2px solid #CCC;
    border-radius: 3px;
}

.Jumbotron h1 {
    font-size: 48px;
    text-align: left;
    margin-bottom: 25px;
}

.Jumbotron p {
    text-align: left;
    font-size: 14px;
}

div.Jumbo-Text {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #FFF;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
/* Jumbotron */

/* Account Actions */
.Account-Links {
    position: absolute;
    top: 45px;
    right: 0;
    display: block;
    visibility: hidden;
    margin: 0;
    padding: 0;
    width: 200px;
    height: 0;
    opacity: 0;
    box-sizing: border-box;
    background-color: rgba(0,0,0,.7);
    z-index: 1000;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.Account-Links-On {
    height: auto;
    visibility: visible;
    opacity: 1;
}

.Account-Links-On::after {
    position: absolute;
    top: -8px;
    right: 22px;
    content: '';
    width: 0;
    height: 0;
    border-bottom: solid 8px rgba(0,0,0,.7);
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
}

.Account-Link {
    display: block;
    color: #FFF;
    margin: 0;
    padding: 10px;
}

.Account-Link:hover {
    background-color: rgba(231,76,60,.75);
}
/* Account Actions */

/* Page Elements */
.Page-Title {
    display: block;
    margin: 0;
    margin-bottom: 15px;
    padding: 20px;
    padding-left: 20px;
    background-color: #FFF;
    box-sizing: border-box;
    font-size: 32px;
    color: #333;
    border-radius: 3px;
    border-bottom: 2px solid #CCC;
    font-weight: bold;
}

.Row {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.Row .Panel {
    display: block;
    float: left;
    margin: 0;
    padding: 20px;
    width: 70%;
    height: auto;
    background-color: #FFF;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 3px;
    border-bottom: 2px solid #CCC;
}

.Row .Sidebar {
    display: block;
    float: left;
    margin-left: 3%;
    padding: 20px;
    width: 27%;
    height: auto;
    background-color: #FFF;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 3px;
    border-bottom: 2px solid #CCC;
}

h1.Panel-Title {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

div .Stat-Title {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}
/* Page Elements */

/* Columns */
.span {
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.span > * {
    display: inline-block;
}

.span2 > * {
    display: inline-block;
    width: 45%;
}

.span3 > * {
    display: inline-block;
    width: 30%;
}
/* Columns */

/* UI */
.Card {
    background-color: #FFF;
    padding: 25px;
    border-bottom: 2px solid #CCC;
    border-radius: 3px;
    margin-bottom: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
/* UI */

在这里查看http://54.84.226.104/

0 个答案:

没有答案
相关问题
最新问题