*{margin:0;padding:0}
html{background:url(../images/html_bj01.gif) repeat-x scroll 0 0 #fff;font:12px/20px "SimSun", "宋体", "Arial Narrow"}
img{border:0}
ul, li, ol{list-style:none}
.left{float:left}
.right{float:right}
a{text-decoration:none;outline:0;color:#222}
a:hover{text-decoration:underline}
#content,#product,#headed{width:1000px;margin:0 auto}
#bottom{width:1000px;margin:0 auto 20px; overflow:hidden}
.logo{width:251px;height:40px;display:block;text-indent: -20000px; background:url("../images/logo.png") no-repeat scroll; margin-top:20px}
.navwarp {background: #f9f9f9;border-bottom: 1px solid #f1f1f1;height: 35px;position: relative;}
.navwarp-top {line-height: 35px;margin: 0 auto;width: 1000px;}
.navwarp-top p a {padding: 0 5px 2px 25px;}
.navwarp-top a.wei01 {background:url("/img/wei.png") no-repeat scroll 5px -42px;}
.navwarp-top a.wei02 {background:url("/img/wei.png") no-repeat scroll 5px -1px;}
.navwarp-top a.wei03 {background:url("/img/wei.png") no-repeat scroll 10px -60px;}
.navwarp-top a.wei04 {background:url("/img/wei.png") no-repeat scroll 5px -21px;}
.headed_right{margin-top:32px}
.headed_ul li{color:#828282;margin:0 3px;float:left;display:block;position:relative;line-height:24px}
.headed_ul li a{color:#828282;height:20px;overflow:hidden}
.search{margin:32px 10px 0 0}
.kefu span{background:url(../images/icon.gif) no-repeat 0 -19px;padding-left:22px;height:18px;margin-left:2px;display:inline;width:84px}
.w84{width:84px}
#nav{width:84px;height:25px;float:left;display:block;position:relative;z-index:99999}
.part2{height:25px;overflow:hidden;width:84px}
.w84 .part a{background:url(../images/kefu_hover.gif) no-repeat 0 0;width:84px;height:25px;display:block}
.w84 .part1 a{background:none;width:74px;height:22px}
#nav_div.part{width:113px;height:190px;position:absolute;z-index:99999}
.part .part1{background:url(../images/kefu_bj.gif) no-repeat 0 0;width:113px;height:309px}
.hyzx{color:#62abb0;width:75px;margin-left:20px;margin-top:8px;float:left;display:inline}
.ywzx{color:#8e8e8e;width:75px;margin-left:20px;margin-top:8px;float:left;display:inline}
.qq{width:75px;margin-left:20px;margin-top:3px;float:left;display:inline}
.btn_bj{background:url("../images/icon.gif") no-repeat scroll 0 -34px;border:0 none;cursor:pointer;height:21px;width:22px}
.txt{width:128px;height:19px;border:1px solid #c9caca;color:#666;padding-left:5px;line-height:19px}
.menu{width:1000px;float:left;margin-top:21px;position:relative;z-index:999}
.menu li{float:left}
.menu_center{width:0;height:35px;border-left:1px solid #2189d7;border-right:1px solid #3982c8}
.menu li a{height:41px;line-height:38px;width:197px;display:block;text-align:center;font-size:14px;color:#fff;font-weight:bold}
.menu li a:hover{text-decoration:none}
.qh_con{position:absolute;height:333px;width:994px;z-index:999999;left:0;top:41px}
.qh_con ul{background:url(../images/sub_menu_bj1.gif) repeat-x 0 0;width:974px;height:50px;padding-left:20px;overflow:hidden}
.qh_con li{float:left;margin-top:15px;height:25px;_overflow:hidden}
.qh_con li a{font-size:14px;color:#fff;margin:0 4px;_margin:0 5px;float:left;padding-right:8px;_padding-right:6px;line-height:27px;display:inline;width:auto;height:auto;font-weight:100}
.qh_con li a span{float:left;display:block;height:25px;padding-right:9px;_padding-right:7px}
.qh_con li a.nav_on{background:url(../images/submenu_hover.gif) no-repeat top right;color:#007ddd}
.qh_con li a.nav_on span{background:url(../images/submenu_hover.gif) no-repeat top left}
.qh_con li a:hover{background:url(../images/submenu_hover.gif) no-repeat top right;color:#007ddd}
.qh_con li a:hover span{background:url(../images/submenu_hover.gif) no-repeat top left}
.banner_dl{float:left;width:415px;margin-top:5px;height:44px}
.banner_dl dt{float:left;width:60px;height:36px;text-align:center;display:table-cell;vertical-align:middle;line-height:36px;overflow:hidden}
.banner_dl dt img{vertical-align:middle}
.banner_dl dt a{width:60px;height:36px}
.menu li .banner_dl a{color:#7f7f7f;font-size:12px;font-weight:100;width:auto;height:auto;line-height:24px}
.menu li .banner_dl a:hover{background:0;color:#7f7f7f;width:auto;height:auto}
.menu li .banner_dl .sy_dd a:hover{background:0;color:#7f7f7f;width:70px;height:auto}
.banner_dl dd{float:left;margin-top:10px;margin-left:20px;display:inline}
.banner_dl .m-let12{margin-left:30px;float:left}
.bannerb{width:994px;height:378px;background:url(../images/banner_bj.gif) no-repeat 0 0;padding-top:9px}
.banner{width:992px;float:left;background:url(../images/banner_left2.gif) repeat-x 0 bottom;height:333px;border:1px solid #bfdbf1;z-index:0}
#qh_con0 .banner{width:992px;float:left;background:url(../images/banner_left5.gif) no-repeat 0 bottom;height:333px;border:1px solid #bfdbf1}
.banner_left2{width:458px;height:333px;border-right:1px solid #d7d7d7}
#qh_con1 .banner, #qh_con3 .banner{height:384px;background:url(../images/banner_bj5.gif) repeat-x 0 bottom;border:1px solid #bfdbf1;border-top:0}
#qh_con3 .banner_left2{height:384px;border-right:1px solid #d7d7d7}
#qh_con3 .banner_right{width:533px;height:384px;overflow:hidden}
#qh_con3 .banner_right img{width:533px;margin-top:2px;height:382px}
#qh_con1 .jj_txt{height:207px}
#qh_con0 .jj_txt{margin-top:0;height:247px}
.jj_txt{color:#7f7f7f;margin-top:0px;margin-left:22px;width:405px;height:230px;line-height:18px;float:left;display:inline}
.xiangxi{background:url(../images/dixian.gif) no-repeat 0 0;width:422px;margin-left:8px;float:left;display:inline}
.xiangxi1{width:422px;margin-left:8px}
.qh_con .liulan{padding-top:35px;padding-left:14px;float:left}
.qh_con .liulan a{color:#007dd;margin-right:10px;width:auto;height:auto;display:inline;font-size:12px;font-weight:100;color:#007ddd}
.qh_con .liulan a:hover{background:0;color:#007ddd}
.banner_right{width:533px;height:333px;overflow:hidden}
.banner_right img{width:533px;height:333px}
.jiejue{width:994px}
.jiejue li{float:left;margin-top:7px}
.jiejue li a{text-indent:-9999%;display:block;height:30px}
.qiye{background:url(../images/jiejue.gif) no-repeat 0 0;width:166px;position:relative;z-index:999999}
.wangba{background:url(../images/jiejue.gif) no-repeat 0 -30px;width:153px;position:relative;z-index:999999}
.jiudian{background:url(../images/jiejue.gif) no-repeat 0 -60px;width:170px;position:relative;z-index:999999}
.xuexiao{background:url(../images/jiejue.gif) no-repeat 0 -90px;width:162px;position:relative;z-index:999999}
.liansuo{background:url(../images/jiejue.gif) no-repeat 0 -120px;width:180px;position:relative;z-index:999999}
.shequ{background:url(../images/jiejue.gif) no-repeat 0 -150px;width:162px;position:relative;z-index:999999}
.tc{background:url(../images/hc_bj.png) no-repeat 0 0;width:542px;height:245px;position:absolute;top:-241px;left:-4px;z-index:999999}
.tc1{background:url(../images/hc_bj1.png) no-repeat 0 0;width:542px;height:245px;position:absolute;top:-241px;right:-5px;z-index:999999}
.qy_txt{width:300px;margin-left:20px;margin-top:20px;float:left;display:inline}
.qy_txt li{line-height:20px;margin-top:0;display:block;width:300px}
#tc a{color:#828282;text-indent:0}
.qy_txt .more1{float:right;margin-right:20px}
#tc .more1 a{color:#007ddd;background:url(../images/more1.gif) no-repeat right 5px;padding-right:10px;width:50px}
#tc img{margin-top:4px;float:left;margin-left:4px}
.gonggao{width:992px;border:1px solid #d7d7d7;height:30px;margin-top:7px}
.gg_title{background:url(../images/gonggao_title.gif) no-repeat 0 0;width:86px;height:30px;border-right:1px solid #d7d7d7}
.gg_txt{background:url(../images/news_bg.gif) repeat-x 0 0;width:905px;height:30px;overflow:hidden}
.gg_txt ul li{display:block;line-height:30px;width:410px;float:left}
.gg_txt ul li a{float:left;margin-left:20px;color:#666;display:inline-block}
#wrap{width:380px;height:30px;overflow:hidden;float:left}
#con{height:150px}
#con li, #con2 li{line-height:30px}
#con li a, #con2 li a{width:260px;margin-left:20px;color:#666;display:inline-block}
#wrap1{width:380px;height:30px;overflow:hidden;float:left}
#con3{height:150px}
#con3 li, #con4 li{line-height:30px}
#con3 li a, #con4 li a{width:260px;margin-left:20px;color:#666;display:inline-block}
.gg_txt ul li span{float:right;color:#8e8d8d;margin-right:30px;dispaly:inline}
.more2{color:#797979;line-height:30px;margin-left:35px;float:left;display:inline}
.more134{color:#797979;line-height:30px;margin-left:25px;float:left;display:inline;border-right:1px solid #d7d7d7;padding-right:10px}
.tab{width:330px;float:left;margin-top:7px}
.ui-tabs-nav{height:24px}
.ui-tabs-nav li{background:url(../images/tab_bj.jpg) no-repeat 0 0;width:75px;height:24px;float:left;text-align:center;margin-top:1px}
.ui-tabs-nav li a{font-size:12px;color:#737373;line-height:24px;cursor:pointer;display:block;width:75px;height:24px}
#select1 li.ui-tabs-selected{background:url(../images/tab_hover.jpg) no-repeat 0 0;height:24px}
.ui-tabs-nav li.ui-tabs-selected a{color:#fff}
.ui-tabs-panel{width:328px;border:1px solid #dbdbdb;border-bottom:0;float:left;margin-top:-1px;height:190px;position:relative;z-index:1;overflow:hidden}
.ui-tabs-panel img{ margin-left:2px; margin-top:2px}
.ui-tabs-hide{display:none}
.tab_bottom{background:url(../images/tab_bottom.gif) no-repeat 0 0;width:330px;height:4px;float:left;_float:none;overflow:hidden}
.products{width:329px;height:220px;margin-top:7px;margin-left:8px;position:relative}
.xieshou{width:324px;height:220px;margin-top:7px;margin-left:3px}
#links{padding:5px 15px 10px;width:964px;color:#c0c0c0;border:1px solid #ddd;margin-bottom:10px;background:url(../images/links_bg.gif) repeat-x 0 0}
#links strong{color:#007ddd}
#links p{margin-top:8px;font-size:12px}
#links a{padding:0 5px;font-size:12px}
#line{border-bottom:1px solid #ddd;height:8px}
.kuaijie{width:994px;background:url(../images/bottom_bj.gif) repeat-x 0 0;height:34px;border:1px solid #ddd;margin:10px 0 10px;display:inline}
.kuaijie ul{margin-left:10px}
.kuaijie li{float:left;line-height:34px;color:#c0c0c0;margin:0 4px}
.kuaijie a{color:#222}
.dingyue{padding-top:8px;margin-right:20px;display:inline}
.dingyue span{margin-top:0}
.bq{padding-top:10px;text-align:center;color:#828282; clear:both}
.bq a{color:#828282}
#banner{height:375px;overflow:hidden;width:993px;position:relative}
#btn{display:inline;width:120px;hegiht:27px;float:right;margin:-40px 0 0 865px;position:absolute;z-index:121}
#btn a{color:#615b5b;font:700 13px "Arial";background:url(../images/ibbtn.png) no-repeat;float:left;width:18px;height:19px;padding-top:8px;text-align:center;text-decoration:none;margin-left:5px}
#btn a.activeSlide{color:#fff;background:url(../images/ibhbtn.png) no-repeat}
#btn a:hover{color:#fff;background:url(../images/ibhbtn.png) no-repeat}
* #btn a{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../images/ibbtn.png");_background:0}
* #btn a.activeSlide{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../images/ibhbtn.png");_background:0}
* #btn a:hover{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../images/ibhbtn.png");_background:0}
.lmTitle{background:url("../images/links_bg.gif") repeat-x scroll 0 0;border-bottom:1px solid #e4e4e4;height:30px;line-height:34px}
.lmTitle h2{border-bottom:1px solid #007ddd;color:#007ddd;display:inline-block;float:left;font-size:14px;height:30px;padding:0 10px;width:60px}
.lmTitle span{display:inline-block;float:right;padding-right:10px}
.lmTitle span a{color:#797979;margin:0 3px}
ul.faList li{border-bottom:1px solid #f4f4f4;height:70px;padding:10px 0}
ul.faList li a h3{display:inline-block;font-size:12px;padding:0 0 5px 0;width:180px}
ul.faList li a:hover{text-decoration:none}
ul.faList li a img{float:left;margin-right:15px;margin-top:5px}
ul.faList li a span{color:#999;display:inline-block;float:left;line-height:18px;width:180px}
ul.listTxt li{color:#999;line-height:25px}
ul.listTxt li span{float:right}
ul.arrow li{background:url(../images/icon.png) no-repeat scroll 2px 10px;padding-left:15px}
ul.listTxt li a{margin-right:5px;color:#666}
#mi-pic{border:1px solid #ddd;float:left;height:340px;margin-top:10px;overflow:hidden;width:992px}
.cphot{color:#e4e4e4;display:inline-block;float:left;margin-left:10px}
.cphot a{display:inline-block;padding:0 3px}
.mi-picbody{overflow:hidden;width:992px;}
.mi-picbody ul{margin-top:12px;overflow:hidden}
.mi-picbody li{float:left;margin-left:13px;margin-top:5px;overflow:hidden;text-align:center;width:150px}
.mi-picbody li a{color:#444}
.mi-picbody li a:hover{text-decoration:underline}
.mi-picbody img{border:1px solid #eee;padding:1px}
.mi-picbody a:hover img{border:1px solid #007ddd;padding:1px}
.yy_left{width:297px;background:url(../images/div_right.gif) repeat-y right 0;height:285px;margin-top:10px}
.yy_dl{width:297px;margin-top:15px}
.yy_dl dt{width:297px;text-align:center}
.yy_dl dd a{width:297px;text-align:center;color:#828282;font-size:12px;height:20px;line-height:20px;font-weight:100}
.yy_dl dd a:hover{background:0;height:20px}
.yy_right{width:650px;height:295px}
.yy_right ul{background:0;width:650px;height:auto;margin-top:20px}
.yy_right ul li{width:650px;height:auto;margin-top:0;line-height:24px}
.yy_right ul li a{float:left;color:#828282;font-size:12px;line-height:24px}
.yy_right ul li span{float:right;padding-right:150px}
.yy_right ul li a:hover{background:0;height:auto}
.div_bottom{background:url(../images/div_bottom.gif) repeat-x 0 bottom;margin-left:15px;padding-bottom:10px;display:inline}
.div_bottom1{margin-left:15px;padding-bottom:10px;display:inline}
.div_pic{ width:992px;}
.div_pic ul{ background:none; width:950px; height:330px}
.div_pic li{ float:left; width:200px; margin-right:37px; text-align:center}
.div_pic li a{ color:#000; line-height:20px; font-size:12px; float:none}
.div_pic li img:hover{ border:1px solid #007ddd}
.div_pic li a:hover{ background:none;}
.div_pic li img{ height:150px; width:200px; border:1px solid #ccc}
.div_pic li span{text-align:left; color:#777;}
#qh_con3 .liulan{padding-top:15px;padding-left:14px;float:left}
#qh_con3 .liulan a{color:#007ddd;margin-right:10px;width:auto;height:auto;display:inline;font-size:12px;font-weight:100}
#qh_con3 .liulan a:hover{background:0;color:#007ddd}
#qh_con3 .jj_txt p{padding-left:40px}
#qh_con3 .jj_txt{height:277px;padding-top:30px}
#qh_con3 .jj_txt_title a, #qh_con1 .jj_txt_title a{font-size:14px;color:#007ddd;width:auto;height:auto;text-align:left;font-weight:100;line-height:30px}
#qh_con3 .jj_txt_title a:hover, #qh_con1 .jj_txt_title a:hover{background:0}
#qh_con1 .jj_txt{width:auto}
.div_right{width:337px;background:url(../images/div_right.gif) repeat-y right 0;height:335px;margin:25px 0;margin-left:30px;display:inline}
.div_right3{margin-top:25px}
#chat_f1, #chat_f2{font-size:12px}
#chat_f1{position:fixed;right:10px;top:150px;width:93px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+220))}
#chat_f1_main{height:157px;background:url(../images/c2.gif) no-repeat}
#close{display:block;width:17px;height:17px;margin-left:76px;cursor:pointer;}
.a_kf, .a_sh{width:70px;height:20px;display:inline-block;margin:0 6px;}
.a_kf{margin-top:65px;}
#chat_f1_bottom{height:3px;width:82px;overflow:hidden;background:url(../images/c2.gif) 0px -160px no-repeat}
.chat_f1_expr{width:82px;height:0px;overflow:hidden}
.list{height:25px;border:1px solid #dbdbdb;border-top:none;overflow:hidden;color:#787878;background:#fff}
.name{line-height:25px}
.name a:hover{text-decoration:none;}
.arrow{color:#fff; padding-top:10px}
.detail{position:absolute;margin-left:-222px;*margin-left:-294px;margin-top:-26px;*margin-top:-8px;display:none;width:200px;padding:10px;border:1px solid #dbdbdb;background:#fff;line-height:18px;z-index:2147483647;}
.send_sms{display:inline-block;width:109px;height:25px;background:url(../images/c2.gif) 0px -163px;vertical-align:middle;}
.mt{margin:2px 0}
.mt5{margin-top:5px}
.chat_f1_expr .list .detail .border{position:absolute;width:1px;height:25px;margin-left:210px;background:#fff;margin-top:-10px}
#chat_f2{display:none;position:fixed;right:1px;top:220px;border:1px solid #ccc;background:#fff;padding:1px 3px;width:1em;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+220));color:#007dcc;cursor:pointer;}
/*微信二维码开始*/
/*返回顶部开始*/
#code,#code_hover{width:40px;height:195px;background:url(../images/icon_1.png) no-repeat;position:fixed;right:20px;cursor:pointer;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
#code{background-position: -189px 0px;bottom:50px;_margin-bottom:50px;}
#code_hover{background-position: -189px 0px;bottom:50px;_margin-bottom:50px;}
#code_img{width:270px;height:355px;background: url(../images/icon_1.png) 92px 109px no-repeat;position:fixed;right:60px;bottom:0px;cursor:pointer;display:none;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:0px;}
/*返回顶部结束*/
/* animation */
.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
.a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
/* 淡入 */
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
/* 淡入-从上 */
.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}
/* 淡入-从右 */
.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}
/* 淡入-从下 */
.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}
/* 淡入-从左 */
.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}
/* 淡出 */
.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}
/* 淡出-向上 */
.a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;}
/* 淡出-向右 */
.a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;}
/* 淡出-向下 */
.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}
/* 淡出-向左 */
.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}
/* 弹跳 */
.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}
/* 弹入 */
.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}
/* 弹入-从上 */
.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}
/* 弹入-从右 */
.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}
/* 弹入-从下 */
.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}
/* 弹入-从左 */
.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}
/* 弹出 */
.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}
/* 弹出-向上 */
.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}
/* 弹出-向右 */
.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}
/* 弹出-向下 */
.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}
/* 弹出-向左 */
.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;}
/* 转入 */
.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}
/* 转入-从左上 */
.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}
/* 转入-从左下 */
.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}
/* 转入-从右上 */
.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}
/* 转入-从右下*/
.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}
/* 转出 */
.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}
/* 转出-向左上 */
.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;}
/* 转出-向左下 */
.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;}
/* 转出-向右上 */
.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;}
/* 转出-向右下 */
.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;}
/* 翻转 */
.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}
/* 翻入-X轴 */
.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}
/* 翻入-Y轴 */
.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}
/* 翻出-X轴 */
.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}
/* 翻出-Y轴 */
.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}
/* 闪烁 */
.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}
/* 震颤 */
.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}
/* 摇摆 */
.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}
/* 摇晃 */
.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}
/* 震铃 */
.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
0%{opacity:0;-webkit-transform:translateY(-100px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinT{
0%{opacity:0;-moz-transform:translateY(-100px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{
0%{opacity:0;-ms-transform:translateY(-100px);}
100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinT{
0%{opacity:0;transform:translateY(-100px);}
100%{opacity:1;transform:translateY(0);}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
0%{opacity:0;-webkit-transform:translateX(100px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{
0%{opacity:0;-moz-transform:translateX(100px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{
0%{opacity:0;-ms-transform:translateX(100px);}
100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinR{
0%{opacity:0;transform:translateX(100px);}
100%{opacity:1;transform:translateX(0);}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
0%{opacity:0;-webkit-transform:translateY(100px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
0%{opacity:0;-moz-transform:translateY(100px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
0%{opacity:0;-ms-transform:translateY(100px);}
100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
0%{opacity:0;transform:translateY(100px);}
100%{opacity:1;transform:translateY(0);}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
0%{opacity:0;-webkit-transform:translateX(-100px);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
0%{opacity:0;-moz-transform:translateX(-100px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
0%{opacity:0;-ms-transform:translateX(-100px);}
100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
0%{opacity:0;transform:translateX(-100px);}
100%{opacity:1;transform:translateX(0);}
}
/* 淡出 */
@-webkit-keyframes fadeout{
0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fadeout{
0%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframes fadeout{
0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeout{
0%{opacity:1;}
100%{opacity:0;}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT{
0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes fadeoutT{
0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes fadeoutT{
0%{opacity:1;-ms-transform:translateY(0);}
100%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes fadeoutT{
0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-100px);}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR{
0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes fadeoutR{
0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes fadeoutR{
0%{opacity:1;-ms-transform:translateX(0);}
100%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes fadeoutR{
0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(100px);}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB{
0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes fadeoutB{
0%{opacity:1;-moz-transform:translateY(0);}
100%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes fadeoutB{
0%{opacity:1;-ms-transform:translateY(0);}
100%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes fadeoutB{
0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(100px);}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL{
0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes fadeoutL{
0%{opacity:1;-moz-transform:translateX(0);}
100%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes fadeoutL{
0%{opacity:1;-ms-transform:translateX(0);}
100%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes fadeoutL{
0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-100px);}
}
/* 弹跳 */
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-30px);}
60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes bounce{
0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-30px);}
60%{-moz-transform:translateY(-15px);}
}
@-ms-keyframes bounce{
0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
40%{-ms-transform:translateY(-30px);}
60%{-ms-transform:translateY(-15px);}
}
@keyframes bounce{
0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
/* 弹入 */
@-webkit-keyframes bouncein{
0%{opacity:0;-webkit-transform:scale(0.3);}
50%{opacity:1;-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(0.9);}
100%{-webkit-transform:scale(1);}
}
@-moz-keyframes bouncein{
0%{opacity:0;-moz-transform:scale(0.3);}
50%{opacity:1;-moz-transform:scale(1.05);}
70%{-moz-transform:scale(0.9);}
100%{-moz-transform:scale(1);}
}
@-ms-keyframes bouncein{
0%{opacity:0;-ms-transform:scale(0.3);}
50%{opacity:1;-ms-transform:scale(1.05);}
70%{-ms-transform:scale(0.9);}
100%{-ms-transform:scale(1);}
}
@keyframes bouncein{
0%{opacity:0;transform:scale(0.3);}
50%{opacity:1;transform:scale(1.05);}
70%{transform:scale(0.9);}
100%{transform:scale(1);}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
0%{opacity:0;-webkit-transform:translateY(-100px);}
60%{opacity:1;-webkit-transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinT{
0%{opacity:0;-moz-transform:translateY(-100px);}
60%{opacity:1;-moz-transform:translateY(30px);}
80%{-moz-transform:translateY(-10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinT{
0%{opacity:0;-ms-transform:translateY(-100px);}
60%{opacity:1;-ms-transform:translateY(30px);}
80%{-ms-transform:translateY(-10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes bounceinT{
0%{opacity:0;transform:translateY(-100px);}
60%{opacity:1;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
0%{opacity:0;-webkit-transform:translateX(100px);}
60%{opacity:1;-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinR{
0%{opacity:0;-moz-transform:translateX(100px);}
60%{opacity:1;-moz-transform:translateX(-30px);}
80%{-moz-transform:translateX(10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinR{
0%{opacity:0;-ms-transform:translateX(100px);}
60%{opacity:1;-ms-transform:translateX(-30px);}
80%{-ms-transform:translateX(10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes bounceinR{
0%{opacity:0;transform:translateX(100px);}
60%{opacity:1;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
0%{opacity:0;-webkit-transform:translateY(100px);}
60%{opacity:1;-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
0%{opacity:0;-moz-transform:translateY(100px);}
60%{opacity:1;-moz-transform:translateY(-30px);}
80%{-moz-transform:translateY(10px);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
0%{opacity:0;-ms-transform:translateY(100px);}
60%{opacity:1;-ms-transform:translateY(-30px);}
80%{-ms-transform:translateY(10px);}
100%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{
0%{opacity:0;transform:translateY(100px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL{
0%{opacity:0;-webkit-transform:translateX(-100px);}
60%{opacity:1;-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinL{
0%{opacity:0;-moz-transform:translateX(-100px);}
60%{opacity:1;-moz-transform:translateX(30px);}
80%{-moz-transform:translateX(-10px);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinL{
0%{opacity:0;-ms-transform:translateX(-100px);}
60%{opacity:1;-ms-transform:translateX(30px);}
80%{-ms-transform:translateX(-10px);}
100%{-ms-transform:translateX(0);}
}
@keyframes bounceinL{
0%{opacity:0;transform:translateX(-100px);}
60%{opacity:1;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0);}
}
/* 弹出 */
@-webkit-keyframes bounceout{
0%{-webkit-transform:scale(1);}
25%{-webkit-transform:scale(0.95);}
50%{opacity:1;-webkit-transform:scale(1.1);}
100%{opacity:0;-webkit-transform:scale(0.3);}
}
@-moz-keyframes bounceout{
0%{-moz-transform:scale(1);}
25%{-moz-transform:scale(0.95);}
50%{opacity:1;-moz-transform:scale(1.1);}
100%{opacity:0;-moz-transform:scale(0.3);}
}
@-ms-keyframes bounceout{
0%{-ms-transform:scale(1);}
25%{-ms-transform:scale(0.95);}
50%{opacity:1;-ms-transform:scale(1.1);}
100%{opacity:0;-ms-transform:scale(0.3);}
}
@keyframes bounceout{
0%{transform:scale(1);}
25%{transform:scale(0.95);}
50%{opacity:1;transform:scale(1.1);}
100%{opacity:0;transform:scale(0.3);}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT{
0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(20px);}
100%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes bounceoutT{
0%{-moz-transform:translateY(0);}
20%{opacity:1;-moz-transform:translateY(20px);}
100%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes bounceoutT{
0%{-ms-transform:translateY(0);}
20%{opacity:1;-ms-transform:translateY(20px);}
100%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes bounceoutT{
0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(20px);}
100%{opacity:0;transform:translateY(-100px);}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR{
0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(-20px);}
100%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes bounceoutR{
0%{-moz-transform:translateX(0);}
20%{opacity:1;-moz-transform:translateX(-20px);}
100%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes bounceoutR{
0%{-ms-transform:translateX(0);}
20%{opacity:1;-ms-transform:translateX(-20px);}
100%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes bounceoutR{
0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(-20px);}
100%{opacity:0;transform:translateX(100px);}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB{
0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(-20px);}
100%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes bounceoutB{
0%{-moz-transform:translateY(0);}
20%{opacity:1;-moz-transform:translateY(-20px);}
100%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes bounceoutB{
0%{-ms-transform:translateY(0);}
20%{opacity:1;-ms-transform:translateY(-20px);}
100%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes bounceoutB{
0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(-20px);}
100%{opacity:0;transform:translateY(100px);}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL{
0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(20px);}
100%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes bounceoutL{
0%{-moz-transform:translateX(0);}
20%{opacity:1;-moz-transform:translateX(20px);}
100%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes bounceoutL{
0%{-ms-transform:translateX(0);}
20%{opacity:1;-ms-transform:translateX(20px);}
100%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes bounceoutL{
0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(20px);}
100%{opacity:0;transform:translateX(-200px);}
}
/* 转入 */
@-webkit-keyframes rotatein{
0%{opacity:0;-webkit-transform:rotate(-200deg);}
100%{opacity:1;-webkit-transform:rotate(0);}
}
@-moz-keyframes rotatein{
0%{opacity:0;-moz-transform:rotate(-200deg);}
100%{opacity:1;-moz-transform:rotate(0);}
}
@-ms-keyframes rotatein{
0%{opacity:0;-ms-transform:rotate(-200deg);}
100%{opacity:1;-ms-transform:rotate(0);}
}
@keyframes rotatein{
0%{opacity:0;transform:rotate(-200deg);}
100%{opacity:1;transform:rotate(0);}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinLT{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinLT{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinLT{
0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateineftB{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateineftB{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateineftB{
0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRT{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRT{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRT{
0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRB{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRB{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRB{
0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
/* 转出 */
@-webkit-keyframes rotateout{
0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
}
@-moz-keyframes rotateout{
0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
}
@-ms-keyframes rotateout{
0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}
100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}
}
@keyframes rotateout{
0%{transform-origin:center center;transform:rotate(0);opacity:1;}
100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateoutLT{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-ms-keyframes rotateoutLT{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateoutLT{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB{
0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateoutLB{
0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-ms-keyframes rotateoutLB{
0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateoutLB{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateoutRT{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-ms-keyframes rotateoutRT{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateoutRT{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR{
0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateoutBR{
0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-ms-keyframes rotateoutBR{
0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateoutBR{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/* 翻转 */
@-webkit-keyframes flip{
0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}
100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
}
@-moz-keyframes flip{
0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}
100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
}
@-ms-keyframes flip{
0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
}
@keyframes flip{
0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX{
0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
70%{-webkit-transform:perspective(400px) rotateX(10deg);}
100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-moz-keyframes flipinX{
0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateX(-10deg);}
70%{-moz-transform:perspective(400px) rotateX(10deg);}
100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-ms-keyframes flipinX{
0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateX(-10deg);}
70%{-ms-transform:perspective(400px) rotateX(10deg);}
100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
}
@keyframes flipinX{
0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{transform:perspective(400px) rotateX(0);opacity:1;}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
70%{-webkit-transform:perspective(400px) rotateY(10deg);}
100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes flipinY{
0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-moz-transform:perspective(400px) rotateY(-10deg);}
70%{-moz-transform:perspective(400px) rotateY(10deg);}
100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes flipinY{
0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-ms-transform:perspective(400px) rotateY(-10deg);}
70%{-ms-transform:perspective(400px) rotateY(10deg);}
100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY{
0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{transform:perspective(400px) rotateY(0);opacity:1;}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX{
0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-moz-keyframes flipoutX{
0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-ms-keyframes flipoutX{
0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes flipoutX{
0%{transform:perspective(400px) rotateX(0);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY{
0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-moz-keyframes flipoutY{
0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-ms-keyframes flipoutY{
0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes flipoutY{
0%{transform:perspective(400px) rotateY(0);opacity:1;}
100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}
/* 闪烁 */
@-webkit-keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-moz-keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@-ms-keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
/* 震颤 */
@-webkit-keyframes shake{
0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{
0%,100%{-moz-transform:translateX(0);}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-ms-keyframes shake{
0%,100%{-ms-transform:translateX(0);}
10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
20%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes shake{
0%,100%{transform:translateX(0);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(10px);}
}
/* 摇摆 */
@-webkit-keyframes swing{
20%{-webkit-transform:rotate(15deg);}
40%{-webkit-transform:rotate(-10deg);}
60%{-webkit-transform:rotate(5deg);}
80%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(0);}
}
@-moz-keyframes swing{
20%{-moz-transform:rotate(15deg);}
40%{-moz-transform:rotate(-10deg);}
60%{-moz-transform:rotate(5deg);}
80%{-moz-transform:rotate(-5deg);}
100%{-moz-transform:rotate(0);}
}
@-ms-keyframes swing{
20%{-ms-transform:rotate(15deg);}
40%{-ms-transform:rotate(-10deg);}
60%{-ms-transform:rotate(5deg);}
80%{-ms-transform:rotate(-5deg);}
100%{-ms-transform:rotate(0);}
}
@keyframes swing{
20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0);}
}
/* 摇晃 */
@-webkit-keyframes wobble{
0%{-webkit-transform:translateX(0);}
15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
30%{-webkit-transform:translateX(80px) rotate(3deg);}
45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
60%{-webkit-transform:translateX(40px) rotate(2deg);}
75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes wobble{
0%{-moz-transform:translateX(0);}
15%{-moz-transform:translateX(-100px) rotate(-5deg);}
30%{-moz-transform:translateX(80px) rotate(3deg);}
45%{-moz-transform:translateX(-65px) rotate(-3deg);}
60%{-moz-transform:translateX(40px) rotate(2deg);}
75%{-moz-transform:translateX(-20px) rotate(-1deg);}
100%{-moz-transform:translateX(0);}
}
@-ms-keyframes wobble{
0%{-ms-transform:translateX(0);}
15%{-ms-transform:translateX(-100px) rotate(-5deg);}
30%{-ms-transform:translateX(80px) rotate(3deg);}
45%{-ms-transform:translateX(-65px) rotate(-3deg);}
60%{-ms-transform:translateX(40px) rotate(2deg);}
75%{-ms-transform:translateX(-20px) rotate(-1deg);}
100%{-ms-transform:translateX(0);}
}
@keyframes wobble{
0%{transform:translateX(0);}
15%{transform:translateX(-100px) rotate(-5deg);}
30%{transform:translateX(80px) rotate(3deg);}
45%{transform:translateX(-65px) rotate(-3deg);}
60%{transform:translateX(40px) rotate(2deg);}
75%{transform:translateX(-20px) rotate(-1deg);}
100%{transform:translateX(0);}
}
/* 震铃 */
@-webkit-keyframes ring{
0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes ring{
0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-ms-keyframes ring{
0%{-ms-transform:scale(1);}
10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
100%{-ms-transform:scale(1) rotate(0);}
}
@keyframes ring{
0%{transform:scale(1);}
10%,20%{transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);}
}