chat2023_com/public/static/css/animate.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)}
}