84 lines
3.6 KiB
CSS
84 lines
3.6 KiB
CSS
@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)}
|
|
}
|
|
|
|
|