<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html id="home" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><head><meta charset="utf-8">
<title>Big Scale Signup Form</title><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width"><link rel="icon" href="favicon.ico" ><link rel="stylesheet" href="new.css"><script src=""></script>
</head>
<body><div id="main" role="main">
<div class="login" >
<h1 class="login-description">Sign Up</h1></div><form method="post" action="/signup" ><input type="hidden" name="t" ><div class="signupForm"><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField is-active signupField--text" ><span ></span><label class="signupField-label" ><span ><span >What’</span><i class="u-tightenKerning" >s</i><span > your email?</span></span></label><input class="signupField-input" name="email" type="text" placeholder="webmx.me" spellcheck="false" autocomplete="off" ><button type="button" class="signupField-nextButton"><svg viewBox="0 0 23 24"><path d="M23 12H0m10.5 11L23 12 10.5 1" stroke="#88CFE8" stroke-linecap="round" fill="none"></path></svg></button></div></div></div><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField signupField--text" ><span ></span><label class="signupField-label" >Where do you work?</label><input class="signupField-input" name="company" type="text" placeholder="My Company" spellcheck="false" autocomplete="off"><button type="button" class="signupField-nextButton"><svg viewBox="0 0 23 24" ><path d="M23 12H0m10.5 11L23 12 10.5 1" stroke="#88CFE8" stroke-linecap="round" fill="none" ></path></svg></button></div></div></div><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField signupField--text" ><span ></span><label class="signupField-label"><span ><span >What’</span><i class="u-tightenKerning" >s</i><span > your name?</span></span></label><input class="signupField-input" name="name" type="text" placeholder="First Last" spellcheck="false" autocomplete="off" ><button type="button" class="signupField-nextButton" ><svg viewBox="0 0 23 24" ><path d="M23 12H0m10.5 11L23 12 10.5 1" stroke="#88CFE8" stroke-linecap="round" fill="none" ></path></svg></button></div></div></div><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField signupField--password"><span ></span><label class="signupField"></svg></button></div></div></div></div><div class="dotNav" ><span type="button" class="dotNav-item is-active" ></span><span type="button" class="dotNav-item"></span><span type="button" class="dotNav-item" ></span><span type="button" class="dotNav-item" ></span><span type="button" class="dotNav-item" "></span></div></form></div></div><script src=""></script></body></html>
<style>
a {
position: relative;
margin: 50px;
padding: 30px;
display: block;
text-decoration: none;
color: #567489;
font-family: sans-serif;
border: 1px solid gray;
text-align: center
}
a:hover:before {
-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
-moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
-o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
-ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
a:before {
content: "";
position: absolute;
width: 80px;
height: 80px;
display: block;
margin-top: -40px;
margin-left: -40px;
left: 50%;
top: 50%;
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-border-radius: 100%;
border-radius: 100%;
background-color: #1890E6;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
background-color: #1d1d1f;
color: #e8e8ea;
}
.login-header {
position: absolute;
top: 50px;
left: 50px;
-webkit-animation: fadeRight 200ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeRight 200ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.is-mobile {
padding: 0 15px;
}
.is-mobile .login-header {
padding-top: 10px;
position: static;
text-align: left;
}
.is-mobile .login-description {
font-size: 24px;
}
.login-logo {
display: inline-block;
width: 50px;
vertical-align: top;
}
.login-description {
display: inline-block;
margin: 2px 0 0 10px;
line-height: 50px;
font-weight: 300;
vertical-align: top;
}
.signupForm,
.loginForm,
.forgotForm {
position: absolute;
width: 800px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -55%);
-ms-transform: translate(-50%, -55%);
transform: translate(-50%, -55%);
}
@media screen and (max-width: 800px) {
.communityRegister {
padding: 200px 20px 0 20px;
}
.communityRegister .login-header {
top: 20px;
left: 20px;
}
.communityRegister .login-description {
font-size: 24px;
}
.communityRegister .signupForm {
position: static;
width: 100%;
margin: 0 auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.communityRegister .signupField-input {
font-size: 40px;
}
.communityRegister ::-webkit-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 40px !important;
color: #444446;
-webkit-font-smoothing: antialiased;
}
.communityRegister ::-moz-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 40px !important;
color: #444446;
}
.communityRegister .signupField-nextButton {
position: absolute;
display: block;
bottom: 14px;
right: 0;
background: none;
border: 0 none;
}
.communityRegister .signupField-nextButton svg {
width: 32px;
height: 33px;
}
}
.loginForm,
.forgotForm {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
}
.loginForm--mobile,
.forgotForm--mobile {
margin-top: 60px;
position: static;
width: 100%;
top: auto;
left: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.loginForm--mobile .loginForm-field,
.forgotForm--mobile .loginForm-field {
margin-bottom: 20px;
}
.loginForm--mobile .loginField,
.forgotForm--mobile .loginField {
display: block;
-webkit-animation: none;
animation: none;
}
.loginForm--mobile .loginField:last-of-type,
.forgotForm--mobile .loginField:last-of-type {
margin-bottom: 10px;
}
.loginForm--mobile .loginForm-label,
.forgotForm--mobile .loginForm-label,
.loginForm--mobile .forgotForm-label,
.forgotForm--mobile .forgotForm-label {
font-size: 16px;
}
.loginForm--mobile .loginForm-input,
.forgotForm--mobile .loginForm-input,
.loginForm--mobile .forgotForm-input,
.forgotForm--mobile .forgotForm-input {
font-size: 32px;
padding: 4px 0 8px 0;
line-height: 1 !important;
}
.loginForm--mobile ::-webkit-input-placeholder,
.forgotForm--mobile ::-webkit-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 32px !important;
line-height: 1.4 !important;
color: #444446;
-webkit-font-smoothing: antialiased;
}
.loginForm--mobile ::-moz-input-placeholder,
.forgotForm--mobile ::-moz-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 32px !important;
line-height: 1.4 !important;
color: #444446;
}
.loginForm--mobile .loginSubmit-button,
.forgotForm--mobile .loginSubmit-button,
.loginForm--mobile .forgotSubmit-button,
.forgotForm--mobile .forgotSubmit-button {
display: block;
width: 100%;
margin-top: 30px;
}
.loginForm--mobile .loginForm-error,
.forgotForm--mobile .loginForm-error,
.loginForm--mobile .forgotForm-error,
.forgotForm--mobile .forgotForm-error {
position: static;
margin-bottom: 10px;
top: auto;
left: auto;
font-weight: 600;
color: #ea3c43;
-webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.loginForm--mobile .signupSubmit-terms,
.forgotForm--mobile .signupSubmit-terms {
display: block;
margin: 15px auto 30px auto;
text-align: center;
}
.loginForm-field,
.forgotForm-field {
position: relative;
margin-bottom: 40px;
border-bottom: 1px solid #414143;
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.loginForm-field--password {
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.loginForm-weird-questionmark {
font-family: Avenir, Arial;
font-style: normal;
}
.loginForm-label,
.forgotForm-label {
display: block;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: #808082;
}
.loginForm-input,
.forgotForm-input {
position: relative;
width: 100%;
padding: 8px 30px 8px 0;
letter-spacing: -1px;
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-weight: 300;
font-size: 48px;
color: #e8e8ea;
background: none;
border: none;
}
.loginForm-input:focus,
.forgotForm-input:focus {
outline: none;
}
.loginForm ::-webkit-input-placeholder,
.forgotForm ::-webkit-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 48px;
color: #444446;
-webkit-font-smoothing: antialiased;
}
.loginForm ::-moz-input-placeholder,
.forgotForm ::-moz-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 48px;
color: #444446;
}
.loginForm.loginForm-field--password ::-webkit-input-placeholder {
font-family: "Courier New";
}
.loginForm.loginForm-field--password ::-moz-input-placeholder {
font-family: "Courier New";
}
.loginSubmit {
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.loginSubmit-button {
padding: 12px 40px;
border: 0 none;
border-radius: 2px;
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
background-color: #009fe4;
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.loginSubmit-button:hover {
background-color: #009cdf;
}
.loginSubmit-button:active {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
.loginSubmit-button:focus {
outline: none;
}
.loginForm-error,
.forgotForm-error,
.forgotForm-confirmation {
position: absolute;
top: -40px;
left: 0;
font-weight: 600;
color: #ea3c43;
-webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms;
animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms;
}
.forgotForm-confirmation {
color: #61d67f;
}
.loginForm-forgotLink {
letter-spacing: 1px;
color: #e8e8ea;
text-decoration: none;
font-weight: 400;
}
.signupForm--mobile {
margin-top: 20px;
position: static;
width: 100%;
top: auto;
left: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.signupForm--mobile .signupField {
display: block;
margin-bottom: 20px;
-webkit-animation: none;
animation: none;
}
.signupForm--mobile .signupField:last-of-type {
margin-bottom: 10px;
}
.signupForm--mobile .signupField-label {
font-size: 14px;
}
.signupForm--mobile .signupField-input {
font-size: 32px;
padding: 4px 0 8px 0;
line-height: 1 !important;
}
.signupForm--mobile ::-webkit-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 32px !important;
line-height: 1.4 !important;
color: #444446;
-webkit-font-smoothing: antialiased;
}
.signupForm--mobile ::-moz-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 32px !important;
line-height: 1 !important;
color: #444446;
}
.signupForm--mobile .signupSubmit-button {
display: block;
width: 100%;
margin-bottom: 10px;
}
.signupForm--mobile .signupSubmit-terms {
display: block;
margin: 20px auto 30px auto;
text-align: center;
}
.signupForm--mobile .signupSubmit-terms a {
display: block;
}
.signupForm--mobile .signupField-error {
position: static;
margin-bottom: 10px;
top: auto;
left: auto;
font-weight: 600;
color: #ea3c43;
-webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.signupField {
display: none;
position: relative;
border-bottom: 1px solid #414143;
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.signupField.is-active {
display: block;
}
.signupField-wrap.is-exiting {
-webkit-animation: zoomLeft 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: zoomLeft 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
opacity: 0;
}
.signupField-shakeWrap.is-errored {
-webkit-animation: shake 300ms ease;
animation: shake 300ms ease;
}
.signupField-error {
position: absolute;
top: -40px;
left: 0;
font-weight: 600;
color: #ea3c43;
-webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms;
animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms;
}
.signupField-label {
display: block;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: #808082;
}
.signupField-input {
position: relative;
width: 100%;
padding: 8px 40px 8px 0;
letter-spacing: -1px;
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-weight: 300;
font-size: 72px;
color: #e8e8ea;
background: none;
border: none;
}
.signupField-input:focus {
outline: none;
}
.signupField-nextButton {
position: absolute;
display: block;
bottom: 32px;
right: 0;
background: none;
border: 0 none;
}
.signupField-nextButton:focus,
.signupField-nextButton:active {
outline: none;
}
.signupField-nextButton:hover svg {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
.signupField-hint {
position: absolute;
bottom: -32px;
right: 0;
color: #808082;
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.signupField-nextButton svg {
width: 40px;
height: 42px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.signupField-input:active {
outline: none;
}
.signupField--password .signupField-input {
letter-spacing: -10px;
}
.signupSubmit {
-webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1);
}
.signupSubmit-heading,
.signupSubmit-subheading {
margin: 0;
}
.signupSubmit-heading {
font-size: 72px;
line-height: 1.2;
letter-spacing: -1px;
font-weight: 300;
}
.signupSubmit-heading .u-tightenKerning {
margin-left: -10px;
}
.signupSubmit-subheading {
font-size: 32px;
font-weight: 300;
color: #808082;
}
.signupSubmit-button {
display: inline-block;
margin-top: 30px;
padding: 12px 40px;
border: 0 none;
border-radius: 2px;
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
background-color: #009fe4;
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.signupSubmit-button:hover {
background-color: #009cdf;
}
.signupSubmit-button:active {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
.signupSubmit-button:focus {
outline: none;
}
.signupSubmit-terms {
display: inline-block;
margin-left: 10px;
font-size: 14px;
color: #808082;
}
.signupSubmit-terms a {
color: #ccccce;
}
.dotNav {
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.dotNav-item {
display: block;
margin: 16px 0;
height: 10px;
width: 10px;
background-color: rgba(255,255,255,0.25);
border-radius: 10px;
-webkit-transition: all 300ms cubic-bezier(0.5, 0.2, 0.3, 1);
transition: all 300ms cubic-bezier(0.5, 0.2, 0.3, 1);
cursor: pointer;
}
.dotNav-item.is-active {
background: transparent;
box-shadow: 0 0 0 2px #fff;
}
.dotNav-item.is-complete {
background-color: #fff;
}
.dotNav-item.is-active.is-complete {
background-color: rgba(255,255,255,0.25);
}
.signupForm ::-webkit-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 72px;
color: #444446;
-webkit-font-smoothing: antialiased;
}
.signupForm ::-moz-input-placeholder {
font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif;
font-size: 72px;
color: #444446;
}
.u-tightenKerning {
font-style: normal;
margin-left: -2px;
}
@-webkit-keyframes fadeRight {
0% {
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-ms-keyframes fadeRight {
0% {
opacity: 0;
-ms-transform: translateX(-50px);
transform: translateX(-50px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeRight {
0% {
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes fadeUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes fadeUp {
0% {
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes fadeDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes fadeDown {
0% {
opacity: 0;
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes zoomLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
}
}
@-ms-keyframes zoomLeft {
0% {
opacity: 1;
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(-1000px);
transform: translateX(-1000px);
}
}
@keyframes zoomLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
}
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
33% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
66% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@-ms-keyframes shake {
0%, 100% {
transform: translate3d(0, 0, 0);
}
33% {
transform: translate3d(-10px, 0, 0);
}
66% {
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
33% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
66% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
