/*每个页面公共css */ /* 阿里巴巴矢量图标库 start */ @font-face { font-family: "iconfont"; /* Project id 3180711 */ src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'), url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'), url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype'); } .icon { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-del:before { content: "\e718"; } .icon-cut:before { content: "\e609"; } .icon-add:before { content: "\e60a"; } .icon-add-picture05:before { content: "\e639"; } .icon-add-picture04:before { content: "\e636"; } .icon-add-picture03:before { content: "\e642"; } .icon-add-picture02:before { content: "\e8bc"; } .icon-add-picture01:before { content: "\e62c"; } .icon-sandian:before { content: "\e769"; } .icon-nothing-collection:before { content: "\e610"; } .icon-nothing-more:before { content: "\e624"; } .icon-nothing-data:before { content: "\e60c"; } .icon-address-check:before { content: "\e6c2"; } .icon-address-unchecked:before { content: "\e623"; } .icon-navigate-now:before { content: "\e640"; } .icon-send-goods:before { content: "\e601"; } .icon-payment:before { content: "\e602"; } .icon-finish:before { content: "\e63f"; } .icon-take:before { content: "\e649"; } .icon-refund:before { content: "\e613"; } .icon-customer-black:before { content: "\ec2e"; } .icon-customer:before { content: "\e628"; } .icon-check:before { content: "\e61e"; } .icon-del-white:before { content: "\e61f"; } .icon-screen:before { content: "\e60b"; } .icon-search:before { content: "\e653"; } .icon-caidan-mo:before { content: "\e73e"; } .icon-renwu-mo:before { content: "\e73f"; } .icon-shop-cart:before { content: "\e73d"; } .icon-caidan-active:before { content: "\e608"; } .icon-renwu-acitve:before { content: "\e67c"; } .icon-home-mo:before { content: "\e673"; } .icon-home-active:before { content: "\e674"; } .icon-return:before { content: "\e600"; } .icon-next:before { content: "\e60e"; } /* 阿里巴巴矢量图标库 end */ /* 项目基础样式 start */ /* @media screen and (height:812px){ } @media screen and (height:844px){ } @media screen and (height:896px){ } @media screen and (min-height:926px){ } */ .bottoc{margin-top: 6rpx;color: #414141;} .opc{opacity: 0.7;} .width100{width: 100%;} .width55{width: 55%;} .width50{width: 50%;} .width49{width: 49%;} .width48_5{width: 48.5%;} .width48{width: 48%;} .width47{width: 47%;} .width46{width: 46%;} .width45{width: 45%;} .width33{width: 33%;} .width30{width: 30%;} .width29{width: 29%;} .width28{width: 28%;} .width27{width: 27%;} .width26{width: 26%;} .width25{width: 25%;} .posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;} .posir{position: relative;} .posia{position: absolute;} .poszy{position: fixed;left: 0;right: 0;z-index: 3;} .posiszy{position: fixed;left: 0;right: 0;z-index: 5;} .posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;} .posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;} .syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;} .posi-sticky{position: -webkit-sticky;position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;} .dis{display: flex;} .disac{display: flex;align-items: center;} .disja{display: flex;justify-content: space-around;} .disjb{display: flex;justify-content: space-between;} .disje{display: flex;justify-content: flex-end;} .disjbac{display: flex;justify-content: space-between;align-items: center;} .disjcac{display: flex;justify-content: center;align-items: center;} .fc{flex-direction: column;} .fw{flex-wrap: wrap;} .fe{justify-content: flex-end;} .flexs{flex-shrink: 0;} .wh42{width: 42rpx;height: 42rpx;} .wh44{width: 44rpx;height: 44rpx;} button:after{content: none!important;} .borbot{border-bottom: 2rpx solid #EEEEEE;} .borbot:last-child{border-bottom: none;} .bbot{border-bottom: 2rpx solid #EEEEEE;} .tbot{border-top: 2rpx solid #EEEEEE;} .borbot-df{border: 2rpx solid #DFDFDF;} .borbot-cc{border: 2rpx solid #CCCCCC;} .bleft {border-left: 2rpx solid #EEEEEE;} .bbt-d9{border-bottom: 2rpx solid #d9d9d9;} /* 行高 */ .line-h30{line-height: 30rpx;} .line-h32{line-height: 32rpx;} .line-h34{line-height: 34rpx;} .line-h36{line-height: 36rpx;} .line-h38{line-height: 38rpx;} .line-h40{line-height: 40rpx;} .line-h42{line-height: 42rpx;} .line-h44{line-height: 44rpx;} .line-h46{line-height: 46rpx;} .line-h48{line-height: 48rpx;} .line-h50{line-height: 50rpx;} .line-h52{line-height: 52rpx;} .line-h54{line-height: 54rpx;} .line-h56{line-height: 56rpx;} .line-h58{line-height: 58rpx;} .line-h60{line-height: 60rpx;} .line-h62{line-height: 62rpx;} .line-h64{line-height: 64rpx;} .line-h66{line-height: 66rpx;} .line-h68{line-height: 60rpx;} .line-h70{line-height: 70rpx;} .line-h72{line-height: 72rpx;} .line-h74{line-height: 74rpx;} .clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} /* 字体大小 */ .fon20{font-size: 20rpx;} .fon22{font-size: 22rpx;} .fon24{font-size: 24rpx;} .fon25{font-size: 25rpx;} .fon26{font-size: 26rpx;} .fon27{font-size: 27rpx;} .fon28{font-size: 28rpx;} .fon30{font-size: 30rpx;} .fon32{font-size: 32rpx;} .fon34{font-size: 34rpx;} .fon36{font-size: 36rpx;} .fon38{font-size: 38rpx;} .fon40{font-size: 40rpx;} .fon42{font-size: 42rpx;} .fon44{font-size: 44rpx;} .fon46{font-size: 46rpx;} .fon48{font-size: 48rpx;} .fon50{font-size: 50rpx;} .fon52{font-size: 52rpx;} .fon54{font-size: 54rpx;} .fon56{font-size: 56rpx;} .fon58{font-size: 58rpx;} .fon60{font-size: 60rpx;} .fon62{font-size: 62rpx;} .fon64{font-size: 64rpx;} .fon66{font-size: 66rpx;} .fon68{font-size: 68rpx;} .fon70{font-size: 70rpx;} .fon72{font-size: 72rpx;} /* 字体颜色 */ .colf{color: #FFFFFF;} .colf6{color: #f6f6f6;} .colb{color: #000000;} .colc{color: #CCCCCC;} .col3{color: #333333;} .col34{color: #343434;} .col6{color: #666666;} .colf8{color: #F85050;} .col9{color: #999999;} .pcol{color: #3875F6;} .col2c{color: #2C2C2C;} .col80{color: #808080;} .col7D{color: #7D7D7D;} .colB3{color: #B3B3B3;} .col5b{color: #5B5B5B;} .colpeili{color: #868695;} /* 字体位置 */ .tright{text-align: right;} .tcenter{text-align: center;} /* 文字空两格 */ .tindent{text-indent: 2em;} /* 元素缩小 */ .scal13{-webkit-transform: scale(1.3);transform: scale(1.3);} .scal12{-webkit-transform: scale(1.2);transform: scale(1.2);} .scal11{-webkit-transform: scale(1.1);transform: scale(1.1);} .scal10{-webkit-transform: scale(1);transform: scale(1);} .scal09{-webkit-transform: scale(.9);transform: scale(.9);} .scal08{-webkit-transform: scale(.8);transform: scale(.8);} .scal07{-webkit-transform: scale(.7);transform: scale(.7);} .scal06{-webkit-transform: scale(.6);transform: scale(.6);} .scal05{-webkit-transform: scale(.5);transform: scale(.5);} /* 行间距 */ .linh40{line-height: 40rpx;} .linh50{line-height: 50rpx;} .linh60{line-height: 60rpx;} .linh70{line-height: 70rpx;} /* 粗体 */ .bold{font-weight: bold;} .bold400{font-weight: 400;} .bold500{font-weight: 500;} /* 背景颜色 */ .pbackc{background-color: #3875F6;} .bacf{background-color: #FFFFFF;} .bac0{background-color: #000000;} .bcdb{background-color: #DBDBDB;} .bcf8{background: #F85050;} .bacf5{background: #F5F5F5;} .bacf6{background-color: #f6f6f6;} /* 圆角 */ .radius10{border-radius: 10rpx;} .radius15{border-radius: 15rpx;} .radius20{border-radius: 20rpx;} .radius30{border-radius: 30rpx;} .radius35{border-radius: 35rpx;} .radius40{border-radius: 40rpx;} .radius45{border-radius: 45rpx;} /* 上下左右---外边距 */ .mar10{margin: 10rpx;} .mar20{margin: 20rpx;} .mar25{margin: 25rpx;} .mar30{margin: 30rpx;} .mar32{margin: 32rpx;} .mar36{margin: 36rpx;} .mar40{margin: 40rpx;} .mar50{margin: 50rpx;} /* 上下---外边距 */ .mar-sx10{margin-top: 10rpx;margin-bottom: 10rpx;} .mar-sx20{margin-top: 20rpx;margin-bottom: 20rpx;} .mar-sx25{margin-top: 25rpx;margin-bottom: 25rpx;} .mar-sx30{margin-top: 30rpx;margin-bottom: 30rpx;} .mar-sx32{margin-top: 32rpx;margin-bottom: 32rpx;} .mar-sx36{margin-top: 36rpx;margin-bottom: 36rpx;} .mar-sx40{margin-top: 40rpx;margin-bottom: 40rpx;} .mar-sx50{margin-top: 50rpx;margin-bottom: 50rpx;} /* 左右---外边距 */ .mar-zy10{margin-left: 10rpx;margin-right: 10rpx;} .mar-zy20{margin-left: 20rpx;margin-right: 20rpx;} .mar-zy25{margin-left: 25rpx;margin-right: 25rpx;} .mar-zy30{margin-left: 30rpx;margin-right: 30rpx;} .mar-zy32{margin-left: 32rpx;margin-right: 32rpx;} .mar-zy36{margin-left: 36rpx;margin-right: 36rpx;} .mar-zy40{margin-left: 40rpx;margin-right: 40rpx;} .mar-zy50{margin-left: 50rpx;margin-right: 50rpx;} .mar-zy85{margin-left: 85rpx;margin-right: 85rpx;} /* 上---外边距 */ .mar-s10{margin-top: 10rpx;} .mar-s20{margin-top: 20rpx;} .mar-s25{margin-top: 25rpx;} .mar-s30{margin-top: 30rpx;} .mar-s32{margin-top: 32rpx;} .mar-s36{margin-top: 36rpx;} .mar-s40{margin-top: 40rpx;} .mar-s50{margin-top: 50rpx;} .mar-s60{margin-top: 60rpx;} .mar-s70{margin-top: 70rpx;} .mar-s80{margin-top: 80rpx;} .mar-s90{margin-top: 90rpx;} .mar-s100{margin-top: 100rpx;} .mar-s120{margin-top: 120rpx;} .mar-s140{margin-top: 140rpx;} .mar-s160{margin-top: 160rpx;} .mar-s180{margin-top: 180rpx;} /* 下---外边距 */ .mar-x10{margin-bottom: 10rpx;} .mar-x20{margin-bottom: 20rpx;} .mar-x25{margin-bottom: 25rpx;} .mar-x30{margin-bottom: 30rpx;} .mar-x32{margin-bottom: 32rpx;} .mar-x36{margin-bottom: 36rpx;} .mar-x40{margin-bottom: 40rpx;} .mar-x50{margin-bottom: 50rpx;} .mar-x60{margin-bottom: 60rpx;} .mar-x70{margin-bottom: 70rpx;} .mar-x80{margin-bottom: 80rpx;} .mar-x90{margin-bottom: 90rpx;} .mar-x100{margin-bottom: 100rpx;} .mar-x120{margin-bottom: 120rpx;} .mar-x140{margin-bottom: 140rpx;} .mar-x160{margin-bottom: 160rpx;} .mar-x180{margin-bottom: 180rpx;} /* 左---外边距 */ .mar-z10{margin-left: 10rpx;} .mar-z20{margin-left: 20rpx;} .mar-z25{margin-left: 25rpx;} .mar-z30{margin-left: 30rpx;} .mar-z32{margin-left: 32rpx;} .mar-z36{margin-left: 36rpx;} .mar-z40{margin-left: 40rpx;} .mar-z50{margin-left: 50rpx;} /* 右---外边距 */ .mar-y10{margin-right: 10rpx;} .mar-y20{margin-right: 20rpx;} .mar-y25{margin-right: 25rpx;} .mar-y30{margin-right: 30rpx;} .mar-y32{margin-right: 32rpx;} .mar-y36{margin-right: 36rpx;} .mar-y40{margin-right: 40rpx;} .mar-y50{margin-right: 50rpx;} /* 上下左右---内边距 */ .pad10{padding: 10rpx;} .pad20{padding: 20rpx;} .pad25{padding: 25rpx;} .pad30{padding: 30rpx;} .pad32{padding: 32rpx;} .pad36{padding: 36rpx;} .pad40{padding: 40rpx;} .pad50{padding: 50rpx;} /* 上下---内边距 */ .pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;} .pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;} .pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;} .pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;} .pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;} .pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;} .pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;} .pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;} /* 左右---内边距 */ .pad-zy10{padding-left: 10rpx;padding-right: 10rpx;} .pad-zy20{padding-left: 20rpx;padding-right: 20rpx;} .pad-zy25{padding-left: 25rpx;padding-right: 25rpx;} .pad-zy30{padding-left: 30rpx;padding-right: 30rpx;} .pad-zy32{padding-left: 32rpx;padding-right: 32rpx;} .pad-zy36{padding-left: 36rpx;padding-right: 36rpx;} .pad-zy40{padding-left: 40rpx;padding-right: 40rpx;} .pad-zy50{padding-left: 50rpx;padding-right: 50rpx;} /* 上---内边距 */ .pad-s10{padding-top: 10rpx;} .pad-s20{padding-top: 20rpx;} .pad-s25{padding-top: 25rpx;} .pad-s30{padding-top: 30rpx;} .pad-s32{padding-top: 32rpx;} .pad-s36{padding-top: 36rpx;} .pad-s40{padding-top: 40rpx;} .pad-s50{padding-top: 50rpx;} .pad-s120{padding-top: 120rpx;} .pad-s140{padding-top: 140rpx;} .pad-s160{padding-top: 160rpx;} .pad-s180{padding-top: 180rpx;} /* 下---内边距 */ .pad-x10{padding-bottom: 10rpx;} .pad-x20{padding-bottom: 20rpx;} .pad-x25{padding-bottom: 25rpx;} .pad-x30{padding-bottom: 30rpx;} .pad-x32{padding-bottom: 32rpx;} .pad-x36{padding-bottom: 36rpx;} .pad-x40{padding-bottom: 40rpx;} .pad-x50{padding-bottom: 50rpx;} .pad-x120{padding-bottom: 120rpx;} .pad-x140{padding-bottom: 140rpx;} .pad-x160{padding-bottom: 160rpx;} .pad-x180{padding-bottom: 180rpx;} .pad-x260{padding-bottom: 260rpx;} /* 左---内边距 */ .pad-z10{padding-left: 10rpx;} .pad-z20{padding-left: 20rpx;} .pad-z25{padding-left: 25rpx;} .pad-z30{padding-left: 30rpx;} .pad-z32{padding-left: 32rpx;} .pad-z36{padding-left: 36rpx;} .pad-z40{padding-left: 40rpx;} .pad-z50{padding-left: 50rpx;} /* 右---内边距 */ .pad-y10{padding-right: 10rpx;} .pad-y20{padding-right: 20rpx;} .pad-y25{padding-right: 25rpx;} .pad-y30{padding-right: 30rpx;} .pad-y32{padding-right: 32rpx;} .pad-y36{padding-right: 36rpx;} .pad-y40{padding-right: 40rpx;} .pad-y50{padding-right: 50rpx;} .pad-sx27-zy20{padding: 27rpx 20rpx;} scroll-view ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } /* 圆圈中间一个原点 start */ .mo-item { width: 30rpx; height: 30rpx; border-radius: 100%; border: 2rpx solid #000000; box-sizing: border-box; } .active-item{ position: relative; display: flex; justify-content: center; align-items: center; border: 2rpx solid #FF0000; } .active-item::before{ content: ''; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 20rpx; height: 20rpx; border-radius: 100%; background-color: #FF0000; } /* 圆圈中间一个原点 end */ /* 项目基础样式 end */ /* 项目页面样式 start */ /* 首页 */ .home-message-box {line-height: 60rpx;} .home-message-box image { width: 30rpx; height: 35rpx; } .home-message-box view { position: absolute; left: 14rpx; top: -16rpx; width: 40rpx; height: 40rpx; display: flex;justify-content: center;align-items: center; border-radius: 100%; font-size: 22rpx; background-color: #e93030; color: #FFFFFF; -webkit-transform: scale(.8); transform: scale(.8); } .project-notice-box { position: relative; z-index: 1; background-color: #FFFFFF; margin: 20rpx 0; border-radius: 10rpx; box-shadow: 6rpx 6rpx 20rpx rgba(0, 162, 234, 0.3); margin-top: -70rpx; padding: 20rpx 0; } .home-fun-box { background-color: #FFFFFF; padding: 30rpx; margin-bottom: 20rpx; } .fun-title::before { content: ''; display: block; width: 7rpx; height: 30rpx; background: linear-gradient(to top, #FFFFFF 0%, #03affb 40%, #03affb 100%); border-radius: 26%; margin-right: 10rpx; } .home-solution { background-color: #FFFFFF; } .solution-title { bottom: 6rpx; left: -40rpx; right: -40rpx; padding: 6rpx; background-color: rgba(255,255,255,0.6); -webkit-transform: scale(.6); transform: scale(.6); text-align: center; } .engineer-num { position: absolute; top: -16rpx; right: -12rpx; font-size: 24rpx; background-color: #f03232; width: 36rpx; height: 36rpx; display: flex;justify-content: center;align-items: center; border-radius: 100%; color: #FFFFFF; -webkit-transform: scale(.8); transform: scale(.8); } /* 我的页面 */ .my-exit-btn{ height: 88rpx; display: flex;justify-content: center;align-items: center; border-radius: 88rpx; background-color: #03affb; color: #FFFFFF; margin-top: 40rpx; } /* 项目页面样式 end */ /* 动画样式 start */ @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both} .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} .animated.hinge{-webkit-animation-duration:2s;animation-duration:2s} @-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}} @keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}} .bounce{-webkit-animation-name:bounce;animation-name:bounce} @-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}} @keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}} .flash{-webkit-animation-name:flash;animation-name:flash} @-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}} .pulse{-webkit-animation-name:pulse;animation-name:pulse} @-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}} .rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand} @-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}} @keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}} .shake{-webkit-animation-name:shake;animation-name:shake} @-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}} @keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}} .swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing} @-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}} @keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}} .tada{-webkit-animation-name:tada;animation-name:tada} @-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}} @keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}} .wobble{-webkit-animation-name:wobble;animation-name:wobble} @-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} @keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} .bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn} @-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} .bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown} @-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} .bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft} @-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} .bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight} @-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} .bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp} @-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}} @keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}} .bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut} @-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} @keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} .bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown} @-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} @keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} .bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft} @-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} @keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} .bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight} @-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} @keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} .bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp} @-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} @keyframes fadeIn{0%{opacity:0}100%{opacity:1}} .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn} @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown} @-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig} @-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft} @-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig} @-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight} @-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig} @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} @-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig} @-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut} @-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}} @keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}} .fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown} @-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} @keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} .fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig} @-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}} @keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}} .fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft} @-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} @keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} .fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig} @-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}} @keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}} .fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight} @-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} @keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} .fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig} @-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}} @keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}} .fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp} @-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} @keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} .fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig} @-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}} @keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}} .animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip} @-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}} @keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}} .flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX} @-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}} @keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}} .flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY} @-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}} @keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}} .flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important} @-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}} @keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}} .flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY} @-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}} @keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}} .lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} @-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}} @keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}} .lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} @-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} @keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn} @-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} @keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} .rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft} @-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} @keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} .rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight} @-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} @keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} .rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft} @-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} @keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} .rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight} @-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}} @keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}} .rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut} @-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}} @keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}} .rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft} @-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}} @keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}} .rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight} @-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}} @keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}} .rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft} @-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}} @keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}} .rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight} @-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} .slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown} @-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} .slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft} @-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} .slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight} @-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} @keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} .slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft} @-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} @keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} .slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight} @-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} @keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} .slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} @-webkit-keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp} @-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} @keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} .slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown} @-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}} @keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}} .hinge{-webkit-animation-name:hinge;animation-name:hinge} @-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}} @keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}} .rollIn{-webkit-animation-name:rollIn;animation-name:rollIn} @-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}} @keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}} .rollOut{-webkit-animation-name:rollOut;animation-name:rollOut} @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}} @keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}} .zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn} @-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown} @-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft} @-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight} @-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp} @-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}} @keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}} .zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut} @-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}} @keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}} .zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown} @-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}} @keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}} .zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft} @-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}} @keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}} .zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight} @-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}} @keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}} .zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} /* 动画样式 end */ page {background-color: #f4f4f4;} .textc{ color: #dd062f; } .backc{ background-color: #dd062f; }