zhiyu_uni_duanju/static/css/animated.css

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInDown{
	0%{
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0);
		visibility:visible
	}
	to{
		-webkit-transform:translateZ(0);
		transform:translateZ(0)
	}
}
@keyframes slideInDown{
	0%{
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0);
		visibility:visible
	}
	to{
		-webkit-transform:translateZ(0);
		transform:translateZ(0)
	}
}

@-webkit-keyframes slideOutDown{
	0%{
		-webkit-transform:translateZ(0);
		transform:translateZ(0)
	}to{
		visibility:hidden;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
}
@keyframes slideOutDown{
	0%{
		-webkit-transform:translateZ(0);
		transform:translateZ(0)
	}to{
		visibility:hidden;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
}
.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}

.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.animated {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.fast{
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}
@keyframes rotating{
	from{transform:rotate(0)}
	to{transform:rotate(360deg)}
}


@keyframes message {
	0% {
		transform: translateY(0) ;
		opacity: 0;
	  }
	25% {
		transform: translateY(190rpx);
		opacity: 1;
	}
	30% {
		transform: translateY(200rpx);
	    opacity: 1;
	}
	50% {
		transform: translateY(190rpx);
	    opacity: 1;
	}
	70% {
		transform: translateY(200rpx);
	    opacity: 1;
	}
	75% {
		ransform: translateY(190rpx) ;
		opacity:1;
	}
	100% {
		transform: translateY(0) ;
		opacity: 0;
	}
}



@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}