@charset "utf-8"; /*/动画*/ /* …… css3自定义动画效果 …… */ .anim-fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn;} .anim-fadeInBig {-webkit-animation-name: fadeInBig; animation-name: fadeInBig;} .anim-fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp;} .anim-fadeInDown {-webkit-animation-name: fadeInDown; animation-name: fadeInDown;} .anim-pulse {-webkit-animation-name: pulse; animation-name: pulse;} .anim-zoomInDown {-webkit-animation-name: zoomInDown; animation-name: zoomInDown;} .anim-zoomInDownSmall {-webkit-animation-name: zoomInDownSmall; animation-name: zoomInDownSmall;} .animated {-webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode:none} /* 渐显 */ @keyframes fadeIn { 0%{opacity: 0} 100%{opacity: 1} } @-webkit-keyframes fadeIn { 0%{opacity: 0} 100%{opacity: 1} } /* 放大到缩小 */ @-webkit-keyframes fadeInBig{ 0%{opacity:0;-webkit-transform: scale(0); transform: scale(0);} 50%{ -webkit-transform: scale(1.1); transform: scale(1.1);} 100%{ -webkit-transform: scale(1); transform: scale(1);} } @keyframes fadeInBig{ 0%{opacity:0;-webkit-transform: scale(0); transform: scale(0);} 50%{ -webkit-transform: scale(1.1); transform: scale(1.1);} 100%{ -webkit-transform: scale(1); transform: scale(1);} } /* 顶部向下渐显 */ @-webkit-keyframes fadeInUp{ 0%{opacity: 0; -webkit-transform: translate3d(0,-50px,0); transform: translate3d(0,-50px,0);} to{opacity:1; -webkit-transform: none; transform: none;} } @keyframes fadeInUp{ 0%{opacity:0; -webkit-transform: translate3d(0,-50px,0); transform: translate3d(0,-50px,0);} to{opacity:1; -webkit-transform: none; transform: none;} } /* 底部向上渐显 */ @-webkit-keyframes fadeInDown{ 0%{opacity: 0; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0);} to{opacity:1; -webkit-transform: none; transform: none;} } @keyframes fadeInDown{ 0%{opacity:0; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0);} to{opacity:1; -webkit-transform: none; transform: none;} } /* 底部向上渐显 */ @-webkit-keyframes pulse{ 0% {-webkit-transform: scaleX(1);} 50% {-webkit-transform: scale3d(1.05,1.05,1.05);} to {-webkit-transform: scaleX(1);} } @keyframes pulse{ 0% {transform: scaleX(1);} 50% {transform: scale3d(1.05,1.05,1.05);} to {transform: scaleX(1);} } /* 顶部向下放大渐显 */ @-webkit-keyframes zoomInDown{ 0% {opacity: 0;-webkit-transform: scale3d(.5,.5,.5) translate3d(0,-150px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19)} 60% {opacity: 1;-webkit-transform: scale3d(1,1,1) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1)} } @keyframes zoomInDown{ 0% {opacity: 0;transform: scale3d(.5,.5,.5) translate3d(0,-150px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19)} 60% {opacity: 1;transform: scale3d(1,1,1) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1)} } /* 顶部向下放大渐显 */ @-webkit-keyframes zoomInDownSmall{ 0% {opacity: 0;-webkit-transform: scale3d(.5,.5,.5) translate3d(0,-50px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19)} 60% {opacity: 1;-webkit-transform: scale3d(1,1,1) translate3d(0,10px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1)} } @keyframes zoomInDownSmall{ 0% {opacity: 0;transform: scale3d(.5,.5,.5) translate3d(0,-50px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19)} 60% {opacity: 1;transform: scale3d(1,1,1) translate3d(0,10px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1)} }