bind内のcssアニメーションが、綺麗に0pxから60pxに変わらず、急に60pxになります。
html
1<div id="form"> 2 <div id="title">登録する方</div> 3 <input id="nickname" type="text" placeholder="ニックネーム" autocomplete="off"></input> 4 <input id="email" type="text" placeholder="test@gmail.com" autocomplete="off"></input> 5 <input id="password" type="password" placeholder="パスワード(6文字以上)" autocomplete="off"></input> 6 <input id="password_check" type="password" placeholder="パスワード(確認用)" autocomplete="off"></input> 7 <div id="submit">送信</div> 8 </div> 9 <div id="alert"> 10 <div id="alert_title">Not Found</div> 11 <div id="alert_description"> 12 すでにアカウントが存在します。<br> 13 恐れ入りますが、もう一度やり直してください。 14 </div> 15 </div>
css
1span { 2 display: table-cell; 3 vertical-align: middle; 4 text-align: center; 5} 6 7#register_wrapper { 8 display: table; 9 position: relative; 10 margin: 0 auto; 11 width: 400px; 12 height: 100vh; 13} 14 15 #middle { 16 perspective: 100px; 17 -webkit-perspective: 100px; 18 -ms-perspective: 100px; 19 -o-perspective: 100px; 20 -moz-perspective: 100px; 21 } 22 23 #form { 24 transform: translateZ(0px); 25 -webkit-transform: translateZ(0px); 26 } 27 28 #title { 29 width: 100%; 30 color: #fff; 31 font-size: 18px; 32 font-weight: bold; 33 line-height: 1; 34 text-align: center; 35 } 36 37 #nickname { 38 margin-top: 30px; 39 background: rgba(255,255,255,0); 40 width: 100%; 41 height: 30px; 42 color: #fff; 43 font-size: 16px; 44 line-height: 30px; 45 outline: 0; 46 border-top: none; 47 border-right: none; 48 border-left: none; 49 border-radius: 0; 50 border-bottom: 2px solid #93CFF4; 51 } 52 53 #nickname:placeholder-shown { 54 color: #58656F; 55 } 56 57 #nickname::-webkit-input-placeholder { 58 color: #58656F; 59 } 60 61 #email { 62 margin-top: 20px; 63 background: rgba(255,255,255,0); 64 width: 100%; 65 height: 30px; 66 color: #fff; 67 font-size: 16px; 68 line-height: 30px; 69 outline: 0; 70 border-top: none; 71 border-right: none; 72 border-left: none; 73 border-radius: 0; 74 border-bottom: 2px solid #93CFF4; 75 } 76 77 #email:placeholder-shown { 78 color: #58656F; 79 } 80 81 #email::-webkit-input-placeholder { 82 color: #58656F; 83 } 84 85 #password { 86 margin-top: 20px; 87 background: rgba(255,255,255,0); 88 width: 100%; 89 height: 30px; 90 color: #fff; 91 font-size: 16px; 92 line-height: 30px; 93 outline: 0; 94 border-top: none; 95 border-right: none; 96 border-left: none; 97 border-radius: 0; 98 border-bottom: 2px solid #93CFF4; 99 } 100 101 #password:placeholder-shown { 102 color: #58656F; 103 } 104 105 #password::-webkit-input-placeholder { 106 color: #58656F; 107 } 108 109 #password_check { 110 margin-top: 20px; 111 background: rgba(255,255,255,0); 112 width: 100%; 113 height: 30px; 114 color: #fff; 115 font-size: 16px; 116 line-height: 30px; 117 outline: 0; 118 border-top: none; 119 border-right: none; 120 border-left: none; 121 border-radius: 0; 122 border-bottom: 2px solid #93CFF4; 123 } 124 125 #password_check:placeholder-shown { 126 color: #58656F; 127 } 128 129 #password_check::-webkit-input-placeholder { 130 color: #58656F; 131 } 132 133 #submit { 134 display: inline-block; 135 margin-top: 30px; 136 padding: 10px 20px; 137 color: #b0dcf6; 138 font-size: 16px; 139 font-weight: bold; 140 line-height: 1; 141 border: 2px solid #93CFF4; 142 border-radius: 5px; 143 } 144 145 #alert { 146 /*display: none;*/ 147 padding: 20px 20px 0; 148 transform: translateZ(60px); 149 -webkit-transform: translateZ(60px); 150 background: rgba(56,56,58,0.3); 151 opacity: 1; 152 overflow: hidden; 153 } 154 155 #alert_title { 156 color: #93CFF4; 157 font-size: 20px; 158 font-weight: bold; 159 line-height: 1; 160 text-align: center; 161 } 162 163 #alert_description { 164 margin-top: calc(25px - (16px * 1.7 - 16px) / 2); 165 margin-bottom: calc(20px - (16px * 1.7 - 16px) / 2); 166 color: #fff; 167 font-size: 16px; 168 font-weight: bold; 169 line-height: 1.7; 170 text-align: center; 171 }
javascript
1 $("#form").fadeOut("nomal", function() { 2 $("#alert").fadeIn("fast", function() { 3 $("#alert").css({ 4 'transition-delay': '0s', 5 'transition-duration': '2s', 6 'transform':'translateZ(0px)', 7 '-webkit-transform': 'translateZ(0px)', 8 'opacity': '1' 9 }); 10 $("#alert").bind('webkitTransitionEnd MozTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionEnd',function(){ 11 $("#alert").css({ 12 'transition-delay': '0s', 13 'transition-duration': '2s', 14 'transform':'translateZ(60px)', 15 '-webkit-transform': 'translateZ(60px)' 16 }); 17 }); 18 }); 19 });