.anim-1,
.anim-2,
.anim-3,
.anim-4,
.anim-5,
.anim-6,
.anim-7,
.anim-8,
.anim-9,
.anim-10,
.anim-11,
.anim-12 {
  -webkit-transform: translateY(100px) translateX(0);
  -moz-transform: translateY(100px) translateX(0);
  transform: translateY(100px) translateX(0);
  opacity: 0;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.anim-1 {
  -webkit-transition: transform .8s,opacity .8s;
  -moz-transition: transform .8s,opacity .8s;
  -o-transition: transform .8s,opacity .8s;
  transition: transform .8s,opacity .8s;
}
.anim-2 {
  -webkit-transition: transform 1s,opacity 1s;
  -moz-transition: transform 1s,opacity 1s;
  -o-transition: transform 1s,opacity 1s;
  transition: transform 1s,opacity 1s;
}
.anim-3 {
  -webkit-transition: transform 1.2s,opacity 1.2s;
  -moz-transition: transform 1.2s,opacity 1.2s;
  -o-transition: transform 1.2s,opacity 1.2s;
  transition: transform 1.2s,opacity 1.2s;
}
.anim-4 {
  -webkit-transition: transform 1.4s,opacity 1.4s;
  -moz-transition: transform 1.4s,opacity 1.4s;
  -o-transition: transform 1.4s,opacity 1.4s;
  transition: transform 1.4s,opacity 1.4s;
}
.anim-5 {
  -webkit-transition: transform 1.6s,opacity 1.6s;
  -moz-transition: transform 1.6s,opacity 1.6s;
  -o-transition: transform 1.6s,opacity 1.6s;
  transition: transform 1.6s,opacity 1.6s;
}
.anim-6 {
  -webkit-transition: transform 1.8s,opacity 1.8s;
  -moz-transition: transform 1.8s,opacity 1.8s;
  -o-transition: transform 1.8s,opacity 1.8s;
  transition: transform 1.8s,opacity 1.8s;
}
.anim-7 {
  -webkit-transition: transform 2s,opacity 2s;
  -moz-transition: transform 2s,opacity 2s;
  -o-transition: transform 2s,opacity 2s;
  transition: transform 2s,opacity 2s;
}
.anim-8 {
  -webkit-transition: transform 2.2s,opacity 2.2s;
  -moz-transition: transform 2.2s,opacity 2.2s;
  -o-transition: transform 2.2s,opacity 2.2s;
  transition: transform 2.2s,opacity 2.2s;
}
.anim-9 {
  -webkit-transition: transform 2.4s,opacity 2.4s;
  -moz-transition: transform 2.4s,opacity 2.4s;
  -o-transition: transform 2.4s,opacity 2.4s;
  transition: transform 2.4s,opacity 2.4s;
}
.anim-10 {
  -webkit-transition: transform 2.6s,opacity 2.6s;
  -moz-transition: transform 2.6s,opacity 2.6s;
  -o-transition: transform 2.6s,opacity 2.6s;
  transition: transform 2.6s,opacity 2.6s;
}
.anim-11 {
  -webkit-transition: transform 2.8s,opacity 2.8s;
  -moz-transition: transform 2.8s,opacity 2.8s;
  -o-transition: transform 2.8s,opacity 2.8s;
  transition: transform 2.8s,opacity 2.8s;
}
.anim-12 {
  -webkit-transition: transform 3.0s,opacity 3.0s;
  -moz-transition: transform 3.0s,opacity 3.0s;
  -o-transition: transform 3.0s,opacity 3.0s;
  transition: transform 3.0s,opacity 3.0s;
}
.anim-show {
  -webkit-transform: translateY(0px) translateX(0);
  -moz-transform: translateY(0px) translateX(0);
  transform: translateY(0px) translateX(0);
  opacity: 1;
}
.anim-list .anim-1 {
  -webkit-transition: transform .5s,opacity .5s;
  -moz-transition: transform .5s,opacity .5s;
  -o-transition: transform .5s,opacity .5s;
  transition: transform .5s,opacity .5s;
}
.anim-list .anim-2 {
  -webkit-transition: transform .6s,opacity .6s;
  -moz-transition: transform .6s,opacity .6s;
  -o-transition: transform .6s,opacity .6s;
  transition: transform .7s,opacity .7s;
}

/*动画样式*/

.fadeIn{ animation:fadeIn both 0.3s ease-out;-webkit-animation:fadeIn both 0.3s ease-out; -moz-animation:fadeIn both 0.3s ease-out;}

.fadeUp{ visibility:visible; animation:fadeUp both 0.3s ease-out; -webkit-animation:fadeUp both 0.3s ease-out; -moz-animation:fadeUp both 0.3s ease-out;}

.fadeDown{ visibility:visible; animation:fadeDown both 0.3s ease-out; -webkit-animation:fadeDown both 0.3s ease-out; -moz-animation:fadeDown both 0.3s ease-out;}

.anima .zx_img,.anima .sjdl_qj,.anima .ztly_down,.sacleF{ visibility:visible; animation:sacleF both 0.3s ease-out; -webkit-animation:sacleF both 0.3s ease-out; -moz-animation:sacleF both 0.3s ease-out;}

.anima .zx_right{ visibility:visible; animation:fadeRight both 0.5s ease-out; -webkit-animation:fadeRight both 0.5s ease-out; -moz-animation:fadeRight both 0.5s ease-out;}

.anima .zx_left{ visibility:visible; animation:fadeLeft both 0.5s ease-out; -webkit-animation:fadeLeft both 0.5s ease-out; -moz-animation:fadeLeft both 0.5s ease-out;}

.slidL{ visibility:visible; animation:slidL 0.3s both ease-out; -webkit-animation:slidL 0.3s both ease-out; -moz-animation:slidL 0.3s both ease-out;}



/*动画效果*/

/*淡入淡出*/

@-webkit-keyframes fadeIn{

    0%{opacity: 0;}

    100%{opacity:1;}

}

@-moz-keyframes fadeIn{

    0%{opacity: 0;}

    100%{opacity:1;}

}

@keyframes fadeIn{

    0%{opacity: 0;}

    100%{opacity:1;}

}

/*从中心点开始渐显放大*/

@-webkit-keyframes fadeCIn{

    0%{opacity:0; -webkit-opacity:0; -moz-opacity:0; filter:alpha(opacity=0); transform-origin:center; -webkit-transform-origin:center; -moz-transform-origin:center; transform:scale(0.1); -webkit-transform:scale(0.1); -moz-transform:scale(0.1);}

    100%{opacity:1; -webkit-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); transform-origin:center; -webkit-transform-origin:center; -moz-transform-origin:center; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}

}

@-moz-keyframes fadeCIn{

    0%{opacity:0; -webkit-opacity:0; -moz-opacity:0; filter:alpha(opacity=0); transform-origin:center; -webkit-transform-origin:center; -moz-transform-origin:center; transform:scale(0.1); -webkit-transform:scale(0.1); -moz-transform:scale(0.1);}

    100%{opacity:1; -webkit-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); transform-origin:center; -webkit-transform-origin:center; -moz-transform-origin:center; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}

}

@keyframes fadeCIn{

    0%{opacity:0; -webkit-opacity:0; -moz-opacity:0; filter:alpha(opacity=0); transform-origin:center; -webkit-transform-origin:center; -moz-transform-origin:center; transform:scale(0.1); -webkit-transform:scale(0.1); -moz-transform:scale(0.1);}

    100%{opacity:1; -webkit-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); transform-origin:center; -webkit-transform-origin:center; -moz-transform-origin:center; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}

}

/*从左至右移动*/

@-webkit-keyframes slidR{

    0%{ transform:translateX(50%); -webkit-transform:translateX(50%); -moz-transform:translateX(50%); opacity:0; -webkit-opacity:0; -moz-opacity:0;}

    100%{ transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); opacity:1; -webkit-opacity:1; -moz-opacity:1;}

}

@-moz-keyframes slidR{

    0%{ transform:translateX(50%); -webkit-transform:translateX(50%); -moz-transform:translateX(50%); opacity:0; -webkit-opacity:0; -moz-opacity:0;}

    100%{ transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); opacity:1; -webkit-opacity:1; -moz-opacity:1;}

}

@keyframes slidR{

    0%{ transform:translateX(50%); -webkit-transform:translateX(50%); -moz-transform:translateX(50%); opacity:0; -webkit-opacity:0; -moz-opacity:0;}

    100%{ transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); opacity:1; -webkit-opacity:1; -moz-opacity:1;}

}

/*从右到左移动*/

@-webkit-keyframes slidL{

    0%{ transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); opacity:0; -webkit-opacity:0; -moz-opacity:0;}

    100%{ transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); opacity:1; -webkit-opacity:1; -moz-opacity:1;}

}

@-moz-keyframes slidL{

    0%{ transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); opacity:0; -webkit-opacity:0; -moz-opacity:0;}

    100%{ transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); opacity:1; -webkit-opacity:1; -moz-opacity:1;}

}

@keyframes slidL{

    0%{ transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); opacity:0; -webkit-opacity:0; -moz-opacity:0;}

    100%{ transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); opacity:1; -webkit-opacity:1; -moz-opacity:1;}

}

/*从上到下*/

@keyframes fadeUp{

    0%{ opacity:0; transform:translateY(-20%);}

    100%{ opacity:1; transform:translateY(0);}

}

@-webkit-keyframes fadeUp{

    0%{ -webkit-opacity:0; -webkit-transform:translateY(-20%);}

    100%{ -webkit-opacity:1; -webkit-transform:translateY(0);}

}

@-moz-keyframes fadeUp{

    0%{ -moz-opacity:0; -moz-transform:translateY(-20%);}

    100%{ -moz-opacity:1; -moz-transform:translateY(0);}

}

/*从下到上*/

@keyframes fadeDown{

    0%{ opacity:0; transform:translateY(20%);}

    100%{ opacity:1; transform:translateY(0);}

}

@-webkit-keyframes fadeDown{

    0%{ -webkit-opacity:0; -webkit-transform:translateY(20%);}

    100%{ -webkit-opacity:1; -webkit-transform:translateY(0);}

}

@-moz-keyframes fadeDown{

    0%{ -moz-opacity:0; -moz-transform:translateY(20%);}

    100%{ -moz-opacity:1; -moz-transform:translateY(0);}

}

/*从右到左*/

@keyframes fadeRight{

    0%{ opacity:0; transform:translateX(50%);}

    100%{ opacity:1; transform:translateX(0);}

}

@-webkit-keyframes fadeRight{

    0%{ -webkit-opacity:0; -webkit-transform:translateX(50%);}

    100%{ -webkit-opacity:1; -webkit-transform:translateX(0);}

}

@-moz-keyframes fadeRight{

    0%{ -moz-opacity:0; -moz-transform:translateX(50%);}

    100%{ -moz-opacity:1; -moz-transform:translateX(0);}

}

/*从左到右*/

@keyframes fadeLeft{

    0%{ opacity:0; transform:translateX(-50%);}

    100%{ opacity:1; transform:translateX(0);}

}

@-webkit-keyframes fadeRight{

    0%{ -webkit-opacity:0; -webkit-transform:translateX(-50%);}

    100%{ -webkit-opacity:1; -webkit-transform:translateX(0);}

}

@-moz-keyframes fadeRight{

    0%{ -moz-opacity:0; -moz-transform:translateX(-50%);}

    100%{ -moz-opacity:1; -moz-transform:translateX(0);}

}

@keyframes sacleF{

    0%{ opacity:0; transform:scale(0);}

    100%{ opacity:1; transform:scale(1);}

}

@-webkit-keyframes sacleF{

    0%{ -webkit-opacity:0; -webkit-transform:scale(0);}

    100%{ -webkit-opacity:1; -webkit-transform:scale(1);}

}

@-moz-keyframes sacleF{

    0%{ -moz-opacity:0; -moz-transform:scale(0);}

    100%{ -moz-opacity:1; -moz-transform:scale(1);}

}





@keyframes pulse {

    from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

    50% {-webkit-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);}

    to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

}

@-webkit-keyframes pulse {

    from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

    50% { -webkit-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);}

    to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

}

@-moz-keyframes pulse {

    from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

    50% { -webkit-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);}

    to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

}









@keyframes bounceInDown {

    from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }

    0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0);transform: translate3d(0, -50px, 0);}

    60% { opacity: 1; -webkit-transform: translate3d(0, 5px, 0);transform: translate3d(0, 5px, 0);}

    75% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0);}

    90% { -webkit-transform: translate3d(0, 3px, 0);transform: translate3d(0, 3px, 0);}

    to {-webkit-transform: none;transform: none;}

}

@-webkit-keyframes bounceInDown {

    from, 60%, 75%, 90%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

    0% {opacity: 0;-webkit-transform: translate3d(0, -50px, 0);transform: translate3d(0, -50px, 0);}

    60% { opacity: 1;-webkit-transform: translate3d(0, 5px, 0);transform: translate3d(0, 5px, 0);}

    75% {-webkit-transform: translate3d(0, 0px, 0);transform: translate3d(0, 0px, 0);}

    90% {-webkit-transform: translate3d(0, 3px, 0);transform: translate3d(0, 3px, 0);}

    to {-webkit-transform: none;transform: none;}

}

@-moz-keyframes bounceInDown {

    from, 60%, 75%, 90%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

    0% {opacity: 0;-webkit-transform: translate3d(0, -50px, 0);transform: translate3d(0, -50px, 0);}

    60% { opacity: 1;-webkit-transform: translate3d(0, 5px, 0);transform: translate3d(0, 5px, 0);}

    75% {-webkit-transform: translate3d(0, 0px, 0);transform: translate3d(0, 0px, 0);}

    90% {-webkit-transform: translate3d(0, 3px, 0);transform: translate3d(0, 3px, 0);}

    to {-webkit-transform: none;transform: none;}

}



.w01{animation: fadeCIn 0.3s both 0s;-webkit-animation: fadeCIn 0.3s both 0s;-moz-animation: fadeCIn 0.3s both 0s;}

.w02{animation: fadeCIn 0.3s both 0.1s;-webkit-animation: fadeCIn 0.3s both 0.1s;-moz-animation: fadeCIn 0.3s both 0.1s;}

.w03{animation: fadeCIn 0.3s both 0.2s;-webkit-animation: fadeCIn 0.3s both 0.2s;-moz-animation: fadeCIn 0.3s both 0.2s;}

.w04{animation: fadeCIn 0.3s both 0.3s;-webkit-animation: fadeCIn 0.3s both 0.3s;-moz-animation: fadeCIn 0.3s both 0.3s;}

.w05{animation: fadeCIn 0.3s both 0.4s;-webkit-animation: fadeCIn 0.3s both 0.4s;-moz-animation: fadeCIn 0.3s both 0.4s;}

.w06{animation: fadeCIn 0.3s both 0.5s;-webkit-animation: fadeCIn 0.3s both 0.5s;-moz-animation: fadeCIn 0.3s both 0.5s;}

.w07{animation: fadeCIn 0.3s both 0.6s;-webkit-animation: fadeCIn 0.3s both 0.6s;-moz-animation: fadeCIn 0.3s both 0.6s;}

.w08{animation: fadeCIn 0.3s both 0.7s;-webkit-animation: fadeCIn 0.3s both 0.7s;-moz-animation: fadeCIn 0.3s both 0.7s;}

.w09{animation: fadeCIn 0.3s both 0.8s;-webkit-animation: fadeCIn 0.3s both 0.8s;-moz-animation: fadeCIn 0.3s both 0.8s;}

.w10{animation: fadeCIn 0.3s both 0.9s;-webkit-animation: fadeCIn 0.3s both 0.9s;-moz-animation: fadeCIn 0.3s both 0.9s;}

.w11{animation: fadeCIn 0.3s both 1s;-webkit-animation: fadeCIn 0.3s both 1s;-moz-animation: fadeCIn 0.3s both 1s;}

.w12{animation: fadeCIn 0.3s both 1.1s;-webkit-animation: fadeCIn 0.3s both 1.1s;-moz-animation: fadeCIn 0.3s both 1.1s;}

.a1{ animation:slidR 0.3s both 0.01s ease-out; -webkit-animation:slidR 0.3s both 0.01s ease-out; -moz-animation:slidR 0.3s both 0.01s ease-out;}

.a2{ animation:slidR 0.3s both 0.05s ease-out; -webkit-animation:slidR 0.3s both 0.05s ease-out; -moz-animation:slidR 0.3s both 0.1s ease-out;}

.a3{ animation:slidR 0.3s both 0.1s ease-out; -webkit-animation:slidR 0.3s both 0.1s ease-out; -moz-animation:slidR 0.3s both 0.2s ease-out;}

.a4{ animation:slidR 0.3s both 0.15s ease-out; -webkit-animation:slidR 0.3s both 0.15s ease-out; -moz-animation:slidR 0.3s both 0.3s ease-out;}

.a5{ animation:slidR 0.3s both 0.2s ease-out; -webkit-animation:slidR 0.3s both 0.2s ease-out; -moz-animation:slidR 0.3s both 0.4s ease-out;}

.a6{ animation:slidR 0.3s both 0.25s ease-out; -webkit-animation:slidR 0.3s both 0.25s ease-out; -moz-animation:slidR 0.3s both 0.5s ease-out;}

.a7{ animation:slidR 0.3s both 0.3s ease-out; -webkit-animation:slidR 0.3s both 0.3s ease-out; -moz-animation:slidR 0.3s both 0.6s ease-out;}



.z01{animation: pulse 0.3s both 0s;-webkit-animation: pulse 0.3s both 0s;-moz-animation: pulse 0.3s both 0s;}

.z02{animation: pulse 0.3s both 0.1s;-webkit-animation: pulse 0.3s both 0.1s;-moz-animation: pulse 0.3s both 0.1s;}

.z03{animation: pulse 0.3s both 0.2s;-webkit-animation: pulse 0.3s both 0.2s;-moz-animation: pulse 0.3s both 0.2s;}

.z04{animation: pulse 0.3s both 0.3s;-webkit-animation: pulse 0.3s both 0.3s;-moz-animation: pulse 0.3s both 0.3s;}

.b01{animation: bounceInDown 0.3s both 0s;-webkit-animation: bounceInDown 0.3s both 0s;-moz-animation: bounceInDown 0.3s both 0s;}

.b02{animation: bounceInDown 0.3s both 0.1s;-webkit-animation: bounceInDown 0.3s both 0.1s;-moz-animation: bounceInDown 0.3s both 0.1s;}

.b03{animation: bounceInDown 0.3s both 0.2s;-webkit-animation: bounceInDown 0.3s both 0.2s;-moz-animation: bounceInDown 0.3s both 0.2s;}

.b04{animation: bounceInDown 0.3s both 0.3s;-webkit-animation: bounceInDown 0.3s both 0.3s;-moz-animation: bounceInDown 0.3s both 0.3s;}

.b05{animation: bounceInDown 0.3s both 0.4s;-webkit-animation: bounceInDown 0.3s both 0.4s;-moz-animation: bounceInDown 0.3s both 0.4s;}