@charset "UTF-8";
/*动画*/
.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;}

/*从小到大*/
@keyframes bounceIn {0%, 20%, 40%, 60%, 80%, 100% {-webkit-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); 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);}} .bounceIn {-webkit-animation-name: bounceIn;animation-name: bounceIn;-webkit-animation-duration: .75s;animation-duration: .75s;}
/*淡出淡入*/
@-webkit-keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}.fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn;}
/*向上淡入（适用导航）*/
@-webkit-keyframes fadeInUp {from {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp {from {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig {from {opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } /*.animated.flip {-webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; }*/
/*从左到右渐入*/
@-webkit-keyframes fadeInLeft {from {opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft {from {opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft {-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig {from {opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes flipInX {0% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% {-webkit-transform: perspective(400px); transform: perspective(400px); } }
/*从右到左渐入*/
@-webkit-keyframes fadeInRight {from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight {from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight {-webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig {from {opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to {opacity: 1; -webkit-transform: none; transform: none; } }
/*上下摇晃*/
@keyframes flipInX {0% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% {-webkit-transform: perspective(400px); transform: perspective(400px); } }.flipInX {-webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; }