scale@-webkit-keyframes bubble { 0% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); -moz-transform: translate3d(0, 100px, 0); -ms-transform: translate3d(0, 100px, 0); -o-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes bubble { 0% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); -moz-transform: translate3d(0, 100px, 0); -ms-transform: translate3d(0, 100px, 0); -o-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes s3bottle { 0% { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, 33deg); -moz-transform: rotate3d(0, 0, 1, 33deg); -ms-transform: rotate3d(0, 0, 1, 33deg); -o-transform: rotate3d(0, 0, 1, 33deg); transform: rotate3d(0, 0, 1, 33deg); } } @keyframes s3bottle { 0% { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, 33deg); -moz-transform: rotate3d(0, 0, 1, 33deg); -ms-transform: rotate3d(0, 0, 1, 33deg); -o-transform: rotate3d(0, 0, 1, 33deg); transform: rotate3d(0, 0, 1, 33deg); } } @-webkit-keyframes s5leftHand { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, -44deg); -moz-transform: rotate3d(0, 0, 1, -44deg); -ms-transform: rotate3d(0, 0, 1, -44deg); -o-transform: rotate3d(0, 0, 1, -44deg); transform: rotate3d(0, 0, 1, -44deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 0deg); -moz-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); -o-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes s5leftHand { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 44deg); -moz-transform: rotate3d(0, 0, 1, 44deg); -ms-transform: rotate3d(0, 0, 1, 44deg); -o-transform: rotate3d(0, 0, 1, 44deg); transform: rotate3d(0, 0, 1, 44deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 0deg); -moz-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); -o-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes s5rightHand { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 44deg); -moz-transform: rotate3d(0, 0, 1, 44deg); -ms-transform: rotate3d(0, 0, 1, 44deg); -o-transform: rotate3d(0, 0, 1, 44deg); transform: rotate3d(0, 0, 1, 44deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 0deg); -moz-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); -o-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes s5rightHand { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 44deg); -moz-transform: rotate3d(0, 0, 1, 44deg); -ms-transform: rotate3d(0, 0, 1, 44deg); -o-transform: rotate3d(0, 0, 1, 44deg); transform: rotate3d(0, 0, 1, 44deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 0deg); -moz-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); -o-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes people { 0%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -o-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(15px, 0, 0); -moz-transform: translate3d(15px, 0, 0); -ms-transform: translate3d(15px, 0, 0); -o-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } } @keyframes people { 0%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -o-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(15px, 0, 0); -moz-transform: translate3d(15px, 0, 0); -ms-transform: translate3d(15px, 0, 0); -o-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } } @-webkit-keyframes coin { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -o-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); -moz-transform: perspective(400px) scale3d(.95, .95, .95); -ms-transform: perspective(400px) scale3d(.95, .95, .95); -o-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { opacity: 1; -webkit-transform: perspective(400px); -moz-transform: perspective(400px); -ms-transform: perspective(400px); -o-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes coin { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -o-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); -moz-transform: perspective(400px) scale3d(.95, .95, .95); -ms-transform: perspective(400px) scale3d(.95, .95, .95); -o-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { opacity: 1; -webkit-transform: perspective(400px); -moz-transform: perspective(400px); -ms-transform: perspective(400px); -o-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-webkit-keyframes s9w3 { 0% { width: 0; } 100% { width: 300px; } } @keyframes s9w3 { 0% { width: 0; } 100% { width: 245px; } } @-webkit-keyframes spot { 0% { width: 5px; height:5px; } 50% { width: 10px; height: 10px; } 100% { width: 15px; height: 15px; } } @-webkit-keyframes s12water { 0% { height: 96px; } 100% { height: 89px; } } @keyframes s12water { 0% { height: 96px; } 100% { height: 89px; } } @-webkit-keyframes arrow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes arrow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .ani .wmw path, .ani .wmw polygon { stroke-dasharray: 1000px; -webkit-animation: dash 1s .5s linear both; } @-webkit-keyframes dash { 0% { opacity: 0; stroke-dashoffset: 1000; } 100% { opacity: 1; stroke-dashoffset: 0; } } .up { margin: auto; left: 0; right: 2px; bottom: 2.8%; width: 29px; height: 14px; } .wmw { left: 0; top: 0; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes fadeInUpO{ 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 0.6; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInUpO { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 0.6; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-80%,0); -moz-transform: translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0); -o-transform: translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -80%, 0); -moz-transform: translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0); -o-transform: translate3d(0, -80%, 0); transform: translate3d(0,-80%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } /*current down*/ @-webkit-keyframes fadeInC_Down { 0% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { opacity: 0; -webkit-transform: translate3d(0,180%,0); -moz-transform: translate3d(0, 180%, 0); -ms-transform: translate3d(0, 180%, 0); -o-transform: translate3d(0, 180%, 0); transform: translate3d(0, 180%, 0); } } @keyframes fadeInC_Down { 0% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { opacity: 0; -webkit-transform: translate3d(0,180%,0); -moz-transform: translate3d(0, 180%, 0); -ms-transform: translate3d(0, 180%, 0); -o-transform: translate3d(0, 180%, 0); transform: translate3d(0, 180%, 0); } } @-webkit-keyframes fadeInDown_Up { 0% { opacity: 0; -webkit-transform: translate3d(0,-80%,0); -moz-transform: translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0); -o-transform: translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0); } 30% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 60% { opacity: 1; -webkit-transform: translate3d(0,-10%,0); -moz-transform: translate3d(0, -10%, 0); -ms-transform: translate3d(0, -10%, 0); -o-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes fadeInDownbaby { 0% { opacity: 0; -webkit-transform: translate3d(0,-80%,0); -moz-transform: translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0); -o-transform: translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transform: scale(1.2) } } @keyframes fadeInDownbaby { 0% { opacity: 0; -webkit-transform: translate3d(0, -80%, 0); -moz-transform: translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0); -o-transform: translate3d(0, -80%, 0); transform: translate3d(0,-80%, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: 0.5; -webkit-transform: scale(0.8,0.8); } 100% { opacity: 0; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } /*fadeOutTop*/ @-webkit-keyframes fadeOutTop { 0% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { opacity: 1; -webkit-transform: translate3d(0, 80px, 0); -moz-transform: translate3d(0, 80px, 0); -ms-transform: translate3d(0, 80px, 0); -o-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } } @keyframes fadeOutTop { 0% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { opacity: 0; -webkit-transform: translate3d(0, 80px, 0); -moz-transform: translate3d(0, 80px, 0); -ms-transform: translate3d(0, 80px, 0); -o-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); -o-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); -moz-transform: scale3d(.9, .9, .9); -ms-transform: scale3d(.9, .9, .9); -o-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -moz-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); -o-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); -moz-transform: scale3d(.97, .97, .97); -ms-transform: scale3d(.97, .97, .97); -o-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -moz-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); -o-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); -moz-transform: scale3d(.9, .9, .9); -ms-transform: scale3d(.9, .9, .9); -o-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -moz-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); -o-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); -moz-transform: scale3d(.97, .97, .97); -ms-transform: scale3d(.97, .97, .97); -o-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes charector-1{ 0% {background-position: 1px 0;opacity:1;} 7.1% {background-position: -131.3125px 0;} 14.2% {background-position: -261.625px 0;} 21.3%{background-position: -391.9375px 0;} 28.4%{background-position: -522.25px 0;} 35.5%{background-position: -652.5625px 0;} 37.5%{background-position: -782.875px 0;} 42.6%{background-position: -913.1875px 0;} 49.7%{background-position: -1043.5px 0;} 56.8%{background-position: -1173.8125px 0;} 63.9%{background-position: -1304.125px 0;} 71%{background-position: -1434.4375px 0;} 78.1%{background-position: -1564.75px 0;} 85.2%{background-position: -1695.0625px 0;} 92.3%{background-position: -1825.375px 0;} 100%{background-position: -1955.6875px 0;} } @-webkit-keyframes charector-2{ 0% {background-position: 1px 0;opacity:1;} 7.1% {background-position: -82.4375px 0;} 14.2% {background-position: -163.875px 0;} 21.3%{background-position: -245.3125px 0;} 28.4%{background-position: -326.75px 0;} 35.5%{background-position: -408.1875px 0;} 37.5%{background-position: -489.625px 0;} 42.6%{background-position: -571.0625px 0;} 49.7%{background-position: -652.5px 0;} 56.8%{background-position: -733.9375px 0;} 63.9%{background-position: -815.375px 0;} 71%{background-position: -896.8125px 0;} 78.1%{background-position: -978.25px 0;} 85.2%{background-position: -1059.6875px 0;} 92.3%{background-position: -1141.125px 0;} 100%{background-position: -1222.5625px 0;} } @-webkit-keyframes line_1{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 50px; } } @-webkit-keyframes line_2{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 30px; } } @-webkit-keyframes line_3{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 20px; } } @-webkit-keyframes line_4{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 50px; } } @-webkit-keyframes line_5{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 60px; } } @-webkit-keyframes line_6{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 60px; } } @-webkit-keyframes line_7{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 40px; } } @-webkit-keyframes line_8{ 0% { opacity:0; height: 0px; } 100% { opacity:1; height: 40px; } } @-webkit-keyframes shade{ 0%{opacity:0} 100%{opacity:0.7} } /*down*/ @-webkit-keyframes bounce-down { 25% { opacity:1; -webkit-transform: translateY(-5px); } 50%, 100% { opacity:1; -webkit-transform: translateY(0); } 75% { opacity:1; -webkit-transform: translateY(5px); } } @keyframes bounce-down { 25% { opacity:1; transform: translateY(-5px); } 50%, 100% { opacity:1; transform: translateY(0); } 75% { opacity:1; transform: translateY(5px); } } /*right*/ @-webkit-keyframes bounce-right { 25% { opacity:1; -webkit-transform: translateX(5px); } 50%, 100% { -webkit-transform: translateX(0); } 75% { -webkit-transform: translateX(-5px); } } @keyframes bounce-right { 25% { opacity:0; transform: translateX(5px); } 50%, 100% { opacity:1; transform: translateX(0); } 75% { transform: translateX(-5px); } } /*left*/ @-webkit-keyframes bounce-right { 25% { opacity:1; -webkit-transform: translateX(-5px); } 50%, 100% { -webkit-transform: translateX(0); } 75% { -webkit-transform: translateX(5px); } } @keyframes bounce-right { 25% { opacity:0; transform: translateX(-5px); } 50%, 100% { opacity:1; transform: translateX(0); } 75% { transform: translateX(5px); } } /*expandOpen*/ @keyframes expandOpen { 0% { opacity:1; transform: scale(1.4); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { opacity:1; transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { opacity:1; -webkit-transform: scale(1.4); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { opacity:1; -webkit-transform: scale(1); } } /*expandOpen*/ @keyframes expandOpen2 { 0% { opacity:1; transform: scale(1); } 50% { transform: scale(1.2); } 100% { opacity:1; transform: scale(1); } } @-webkit-keyframes expandOpen2 { 0% { opacity:1; transform: scale(1); } 50% { transform: scale(1.2); } 100% { opacity:1; transform: scale(1); } } /*zoomIn*/ @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } } /*zoomInDown*/ @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); } 100% { opacity: 1; } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); animation-timing-function: cubic-bezier(0.550,0.055,0.675,0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); animation-timing-function: cubic-bezier(0.175,0.885,0.320,1); } 100% { opacity: 1; } } /*moveLeft*/ @keyframes moveLeft { 0% { transform: translateX(150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes moveLeft { 0% { -webkit-transform: translateX(150%); } 100% { -webkit-transform: translateX(0%); } } /*moveUp*/ @keyframes moveUp { 0% { opacity:0; transform: translateY(100%); } 100% { opacity:1; transform: translateY(0%); } } @-webkit-keyframes moveUp { 0% { opacity:0; -webkit-transform: translateY(100%); } 100% { opacity:1; -webkit-transform: translateY(0%); } } /*pull_down*/ @keyframes pullDown { 0% { opacity:1; transform: scaleY(0.1); } 40% { opacity:1; transform: scaleY(1.02); } 60% { opacity:1; transform: scaleY(0.98); } 80% { opacity:1; transform: scaleY(1.01); } 100% { opacity:1; transform: scaleY(0.98); } 80% { opacity:1; transform: scaleY(1.01); } 100% { opacity:1; transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { opacity:1; -webkit-transform: scaleY(0.1); } 40% { opacity:1; -webkit-transform: scaleY(1.02); } 60% { opacity:1; -webkit-transform: scaleY(0.98); } 80% { opacity:1; -webkit-transform: scaleY(1.01); } 100% { opacity:1; -webkit-transform: scaleY(0.98); } 80% { opacity:1; -webkit-transform: scaleY(1.01); } 100% { opacity:1; -webkit-transform: scaleY(1); } } /*pull_up*/ @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1.02); } 60% { -webkit-transform: scale(0.98); } 80% { -webkit-transform: scale(1.01); } 100% { -webkit-transform: scale(0.98); } 80% { -webkit-transform: scale(1.01); } 100% { -webkit-transform: scale(1); } } @keyframes fadeInbig { 0% { transform: scale(0); opacity: 0.0; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeInbig { 0% { -webkit-transform: scale(0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /*rotateInDownLeft*/ @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /*c_height*/ @-webkit-keyframes c_height { 0% {height:0px;opacity:1;} 90%{opacity:1;height: 411px;} 100%{opacity:0;} } @keyframes c_height { 0% {height:0px;opacity:1;} 90%{opacity:1;height: 411px;} 100%{opacity:0;} } /*t_height*/ @-webkit-keyframes t_height { 0% {height:0px;opacity:0;} 100%{opacity:1;height: 556px;} } @keyframes t_height { 0% {height:0px;opacity:0;} 100%{opacity:1;height: 556px;} } /*movescale_l*/ @-webkit-keyframes movescale_l { 0% {-webkit-transform:translateX(4px) scale(0.9);} 20%{-webkit-transform:translateX(84px) scale(0.8);} 40%{-webkit-transform:translateX(124px) scale(0.7);} 60%{-webkit-transform:translateX(154px) translateY(-100px) scale(0.5);opacity:1;} 99%{-webkit-transform:translateX(174px) translateY(-200px) scale(0.1);opacity:1;} 100%{opacity:0;} } @keyframes movescale_l{ 0% {-webkit-transform:translateX(4px) scale(0.9);} 20%{-webkit-transform:translateX(84px) scale(0.8);} 40%{-webkit-transform:translateX(154px) scale(0.7);} 60%{-webkit-transform:translateX(154px) translateY(-100px) scale(0.5);opacity:1;} 99%{-webkit-transform:translateX(174px) translateY(-200px) scale(0.1);opacity:1;} 100%{opacity:0;} } /*movescale_r*/ @-webkit-keyframes movescale_r { 0% {-webkit-transform:translateX(-4px) scale(0.9);} 20%{-webkit-transform:translateX(-84px) scale(0.8);} 40%{-webkit-transform:translateX(-154px) scale(0.7);} 60%{-webkit-transform:translateX(-154px) translateY(-100px) scale(0.5);opacity:1;} 99%{-webkit-transform:translateX(-174px) translateY(-200px) scale(0.1);opacity:1;} 100%{opacity:0;} } @keyframes movescale_r{ 0% {-webkit-transform:translateX(-4px) scale(0.9);} 20%{-webkit-transform:translateX(-84px) scale(0.8);} 40%{-webkit-transform:translateX(-154px) scale(0.7);} 60%{-webkit-transform:translateX(-154px) translateY(-100px) scale(0.5);opacity:1;} 99%{-webkit-transform:translateX(-174px) translateY(-200px) scale(0.1);opacity:1;} 100%{opacity:0;} } /*moveWindmill*/ @-webkit-keyframes moveWindmill { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webkit-transform: rotate(270deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes moveWindmill { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webkit-transform: rotate(270deg); } 100% { -webkit-transform: rotate(360deg); } } /*shake*/ @-webkit-keyframes shake{ 0% { -webkit-transform: rotate(0deg); } 20% { -webkit-transform: rotate(15deg); } 30% { -webkit-transform: rotate(9deg); } 40% { -webkit-transform: rotate(3deg); } 55% { -webkit-transform: rotate(0deg); } 70% { -webkit-transform: rotate(-3deg); } 80% { -webkit-transform: rotate(7deg); } 90% { -webkit-transform: rotate(-10deg); } 100% { -webkit-transform: rotate(10deg); } } @keyframes shake{ 0% { -webkit-transform: rotate(0deg); } 20% { -webkit-transform: rotate(15deg); } 30% { -webkit-transform: rotate(9deg); } 40% { -webkit-transform: rotate(3deg); } 55% { -webkit-transform: rotate(0deg); } 70% { -webkit-transform: rotate(-3deg); } 80% { -webkit-transform: rotate(7deg); } 90% { -webkit-transform: rotate(-10deg); } 100% { -webkit-transform: rotate(10deg); } } @-webkit-keyframes shake2{ 0% { -webkit-transform: translateY(-54px);-webkit-opacity:1;} 33.3% { -webkit-transform: translateY(-32px);-webkit-opacity:1; } 66.6% { -webkit-transform: translateY(-18px);-webkit-opacity:1; } 100%{-webkit-transform: translateY(0px);-webkit-opacity:1;} } @keyframes shake2{ 0% { -webkit-transform: translateY(-54px);-webkit-opacity:1; } 33.3% { -webkit-transform: translateY(-32px);-webkit-opacity:1; } 66.6% { -webkit-transform: translateY(-18px);-webkit-opacity:1; } 100%{-webkit-transform: translateY(0px);-webkit-opacity:1;} } /*上下波动*/ @-webkit-keyframes moveCircle { 0% { -webkit-transform: translateY(-80%);-webkit-opacity:0.1;} 5% { -webkit-transform: translateY(-80%);-webkit-opacity:0.3;} 35% { -webkit-transform: translateY(10%);-webkit-opacity:1;} 60% { -webkit-transform: translateY(-13%);} 65% { -webkit-transform: translateY(-13%);} 100% { -webkit-transform: translateY(0%);} } @keyframes moveCircle { 0% { -webkit-transform: translateY(-80%);-webkit-opacity:0.1; transform: translateY(-80%);opacity:0.1;} 5% { -webkit-transform: translateY(-80%);-webkit-opacity:0.3; transform: translateY(-80%);opacity:0.3;} 35% { -webkit-transform: translateY(10%);-webkit-opacity:1; transform: translateY(10%);opacity:1;} 60% { -webkit-transform: translateY(-13%);transform: translateY(-13%);} 65% { -webkit-transform: translateY(-13%);transform: translateY(-13%);} 100% { -webkit-transform: translateY(0%);transform: translateY(0%);} } /*翻转向上*/ .pt-page-rotateRoomTopIn { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: rotateRoomTopIn .8s both ease; animation: rotateRoomTopIn .8s both ease; } @-webkit-keyframes rotateRoomTopIn { from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); } } @keyframes rotateRoomTopIn { from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); } } /*rollIn*/ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); -ms-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } @-webkit-keyframes bounceIn { 0%,100%,20%,40%,60%,80% { -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1); transition-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } 100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @keyframes bounceIn { 0%,100%,20%,40%,60%,80% { -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1); transition-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); -ms-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); -ms-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); -ms-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); -ms-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); -ms-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } 100% { opacity: 1; -webkit-transform: scale3d(1,1,1); -ms-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @-webkit-keyframes slideBottom { 0% { transform: translateY(-150%); } 50% { transform: translateY(60%); } 65% { transform: translateY(-20%); } 80% { transform: translateY(20%); } 95% { transform: translateY(-20%); } 100% { opacity:1; transform: translateY(0%); } } @keyframes slideBottom { 0% { transform: translateY(-150%); } 50% { transform: translateY(8%); } 65% { transform: translateY(-4%); } 80% { transform: translateY(4%); } 95% { transform: translateY(-2%); } 100% { opacity:1; transform: translateY(0%); } } @keyframes slideLeft { 0% { transform: translateX(150%); } 50% { transform: translateX(-8%); } 65% { transform: translateX(4%); } 80% { transform: translateX(-4%); } 95% { transform: translateX(2%); } 100% { opacity:1; transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50% { -webkit-transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); } 100% { opacity:1; -webkit-transform: translateX(0%); } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes slideUp { 0% { transform: translateY(100%); webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 50% { transform: translateY(-8%); } 65% { transform: translateY(4%); } 80% { transform: translateY(-4%); } 95% { transform: translateY(2%); } 100% { opacity:1; transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { opacity:1; -webkit-transform: translateY(0%); } } @-webkit-keyframes water_a{ 0%{ background-position:0 0;} 7.1%{background-position:-612px 0;} 14.2%{ background-position:-1224px 0;} 21.3%{ background-position:-1836px 0;} 28.4%{ background-position:-2448px 0;} 35.5%{ background-position:-3060px 0;} 42.6%{ background-position:-3672px 0;} 49.7%{ background-position:-4284px 0;} 56.8%{ background-position:-4896px 0;} 63.9%{ background-position:-5508px 0;} 71%{ background-position:-6120px 0;} 78.1%{ background-position:-6732px 0;} 85.2%{ background-position:-7344px 0;} 92.3%{ background-position:-7956px 0;} 100%{ background-position:-8568px 0;} } @-webkit-keyframes rotate_Y{ from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes rotate_Y{ from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } /*bak scale*/ @-webkit-keyframes bak_scale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 30% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } 40% { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 60% { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); } 70% { -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); } 80% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); } 90% { -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -ms-transform: scale(1.9); -o-transform: scale(1.9); transform: scale(1.9); } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } /*fadeOutButtom*/ @-webkit-keyframes moveToBottomFade { from { } to { opacity: 0; -webkit-transform: translateY(100%); } } @keyframes moveToBottomFade { from { } to { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } /*translate(..,..)*/ @-webkit-keyframes trascale_r{ from{} to{ -webkit-transform:translate(300px,100px) scale(0.7); } } @-webkit-keyframes trascale_l{ from{} to{ -webkit-transform:translate(-200px,100px) scale(0.7); } } .hover-shadow { position: relative; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0) } .hover-shadow:before { } .hover-shadow:hover { background:url("../images/bottom_bak.png")/*tpa=http://www.xuean360.com/templets/default/images/bottom_bak.png*/ no-repeat bottom; -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-name: hover; animation-name: hover; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: .3s; animation-delay: .3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate } .hover-shadow:hover:before { opacity: .4; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-animation-name: hover-shadow; animation-name: hover-shadow; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: .3s; animation-delay: .3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate } .sink { display: inline-block; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0,0,0,0) } .sink:hover { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px) } /*遮罩*/ @-webkit-keyframes shuade1{ 0%{ width:100%;} 20%{width:80%;} 40%{width:70%;} 60%{width:60%;} 80%{width:50%;} 100%{width:38%;} } @keyframes shuade1{ 0%{ width:100%;} 20%{width:80%;} 40%{width:70%;} 60%{width:60%;} 80%{width:50%;} 100%{width:38%;} } @-webkit-keyframes shuade2{ 0%{ width:38%;} 25%{width:28%;} 50%{width:18%;} 75%{width:8%;} 100%{width:0%;} } @keyframes shuade2{ 0%{ width:38%;} 25%{width:28%;} 50%{width:18%;} 75%{width:8%;} 100%{width:0%;} } @-webkit-keyframes Scale{ 0%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100%{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } @keyframes Scale{ 0%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100%{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } } @-webkit-keyframes Scale2{ 0%{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } 100%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes Scale2{ 0%{ -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } 100%{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } }