animation.less

/*
 * Animation.less
 * Author: iRuxu
 * Creat: 2014/11/15
 * Update: 2017/04/07
 * Description: Base animate
 * Manual: http://csslab.cc
 */

//位移
	.goTop(@time:1s,@position:-100%,@ease:ease-out,@fillmode:forwards){
		.goTopKeyframe(~`'goTop_'+Math.round(Math.random() * 1.0e8)`);
	}
	.goTopKeyframe(@name){
		@keyframes @name{
		    from{transform:translateY(0);}
		    to{transform:translateY(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.goBottom(@time:1s,@position:100%,@ease:ease-out,@fillmode:forwards){
		.goBottomKeyframe(~`'goBottom_'+Math.round(Math.random() * 1.0e8)`);
	}
	.goBottomKeyframe(@name){
		@keyframes @name{
		    from{transform:translateY(0);}
		    to{transform:translateY(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.goLeft(@time:1s,@position:-100%,@ease:ease-out,@fillmode:forwards){
		.goLeftKeyframe(~`'goLeft_'+Math.round(Math.random() * 1.0e8)`);
	}
	.goLeftKeyframe(@name){
		@keyframes @name{
		    from{transform:translateX(0);}
		    to{transform:translateX(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.goRight(@time:1s,@position:100%,@ease:ease-out,@fillmode:forwards){
		.goRightKeyframe(~`'goRight_'+Math.round(Math.random() * 1.0e8)`);
	}
	.goRightKeyframe(@name){
		@keyframes @name{
		    from{transform:translateX(0);}
		    to{transform:translateX(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

//淡入
	.fadeIn(@time:1s,@ease:ease-out,@fillmode:backwards){
		.fadeInKeyframe(~`'fadeIn_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeInKeyframe(@name){
		@keyframes @name{
		    0%{opacity:0;}
		    100%{opacity:1;}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeInTop(@time:1s,@position:-100%,@ease:ease-out,@fillmode:backwards){
		.fadeInTopKeyframe(~`'fadeInTop_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeInTopKeyframe(@name){
		@keyframes @name{
		    0%{opacity:0;transform:translateY(@position);}
	    	100%{opacity:1;transform:translateY(0);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeInBottom(@time:1s,@position:100%,@ease:ease-out,@fillmode:backwards){
		.fadeInBottomKeyframe(~`'fadeInBottom_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeInBottomKeyframe(@name){
		@keyframes @name{
		    0%{opacity:0;transform:translateY(@position);}
	    	100%{opacity:1;transform:translateY(0);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeInLeft(@time:1s,@position:-100%,@ease:ease-out,@fillmode:backwards){
		.fadeInLeftKeyframe(~`'fadeInLeft_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeInLeftKeyframe(@name){
		@keyframes @name{
		    0%{opacity:0;transform:translateX(@position);}
	    	100%{opacity:1;transform:translateX(0);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeInRight(@time:1s,@position:100%,@ease:ease-out,@fillmode:backwards){
		.fadeInRightKeyframe(~`'fadeInRight_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeInRightKeyframe(@name){
		@keyframes @name{
		    0%{opacity:0;transform:translateX(@position);}
	    	100%{opacity:1;transform:translateX(0);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

//淡出
	.fadeOut(@time:1s,@ease:ease-out,@fillmode:forwards){
		.fadeOutKeyframe(~`'fadeOut_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeOutKeyframe(@name){
		@keyframes @name{
		    0%{opacity:1;}
		    100%{opacity:0;}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeOutTop(@time:1s,@position:-100%,@ease:ease-out,@fillmode:forwards){
		.fadeOutTopKeyframe(~`'fadeOutTop_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeOutTopKeyframe(@name){
		@keyframes @name{
		    0%{opacity:1;transform:translateY(0);}
	    	100%{opacity:0;transform:translateY(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeOutBottom(@time:1s,@position:100%,@ease:ease-out,@fillmode:forwards){
		.fadeOutBottomKeyframe(~`'fadeOutBottom_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeOutBottomKeyframe(@name){
		@keyframes @name{
		    0%{opacity:1;transform:translateY(0);}
	    	100%{opacity:0;transform:translateY(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeOutLeft(@time:1s,@position:-100%,@ease:ease-out,@fillmode:forwards){
		.fadeOutLeftKeyframe(~`'fadeOutLeft_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeOutLeftKeyframe(@name){
		@keyframes @name{
		    0%{opacity:1;transform:translateX(0);}
	    	100%{opacity:0;transform:translateX(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.fadeOutRight(@time:1s,@position:100%,@ease:ease-out,@fillmode:forwards){
		.fadeOutRightKeyframe(~`'fadeOutRight_'+Math.round(Math.random() * 1.0e8)`);
	}
	.fadeOutRightKeyframe(@name){
		@keyframes @name{
		    0%{opacity:1;transform:translateX(0);}
	    	100%{opacity:0;transform:translateX(@position);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

//舞台
	.lightSpeedIn(@time:1s,@offset:100%,@ease:ease-out,@fillmode:both){
		.lightSpeedInKeyframe(~`'lightSpeedIn_'+Math.round(Math.random() * 1.0e8)`);
	}
	.lightSpeedInKeyframe(@name){
		@keyframes @name {
		  from {
		    transform: translate3d(@offset, 0, 0) skewX(-30deg);
		    opacity: 0;
		  }

		  60% {
		    transform: skewX(20deg);
		    opacity: 1;
		  }

		  80% {
		    transform: skewX(-5deg);
		    opacity: 1;
		  }

		  to {
		    transform: none;
		    opacity: 1;
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	
	.lightSpeedOut(@time:1s,@offset:100%,@ease:ease-out,@fillmode:both){
		.lightSpeedOutKeyframe(~`'lightSpeedOut_'+Math.round(Math.random() * 1.0e8)`);
	}
	.lightSpeedOutKeyframe(@name){
		@keyframes @name {
		  from {
		    opacity: 1;
		  }

		  to {
		    transform: translate3d(@offset, 0, 0) skewX(30deg);
		    opacity: 0;
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	
//尺寸
	.widthTo(@time:1s,@from:0,@to:100%,@ease:ease,@fillmode:forwards){
		.widthToKeyframe(~`'widthTo_'+Math.round(Math.random() * 1.0e8)`);
	}
	.widthToKeyframe(@name){
		@keyframes @name{
		    from{width:@from;}
		    to{width:@to;}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

	.heightTo(@time:1s,@from:0,@to:100%,@ease:ease,@fillmode:forwards){
		.heightToKeyframe(~`'heightTo_'+Math.round(Math.random() * 1.0e8)`);
	}
	.heightToKeyframe(@name){
		@keyframes @name{
		    from{height:@from;}
		    to{height:@to;}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

//缩放
	.zoomTo(@time:1s,@from:1,@to:1.5,@ease:ease,@fillmode:forwards){
		.zoomToKeyframe(~`'zoomTo_'+Math.round(Math.random() * 1.0e8)`);
	}
	.zoomToKeyframe(@name){
		@keyframes @name{
		    from{transform:scale(@from);}
		    to{transform:scale(@to);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

	.zoomIn(@time:1s,@sacle:.3,@ease:ease-in-out,@fillmode:forwards){
		.zoomInKeyframe(~`'zoomIn_'+Math.round(Math.random() * 1.0e8)`);
	}
	.zoomInKeyframe(@name){
		@keyframes @name {
		  from {
		    opacity: 0;
		    transform: scale3d(@sacle,@sacle,@sacle);
		  }

		  50% {
		    opacity: 1;
		    transform: scale3d(1, 1, 1);
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

	.zoomOut(@time:1s,@sacle:1.8,@ease:ease-in-out,@fillmode:forwards){
		.zoomOutKeyframe(~`'zoomOut_'+Math.round(Math.random() * 1.0e8)`);
	}
	.zoomOutKeyframe(@name){
		@keyframes @name {
		  from {
		    opacity: 1;
		    transform: scale3d(1, 1, 1);
		  }

		  to {
		    opacity: 0;
		    transform: scale3d(@sacle,@sacle,@sacle);
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}

//旋转
	.rotateTo(@time:1s,@from:0,@to:180deg,@ease:ease-in-out,@fillmode:forwards){
		.rotateToKeyframe(~`'rotateTo_'+Math.round(Math.random() * 1.0e8)`);
	}
	.rotateToKeyframe(@name){
		@keyframes @name{
		    from{transform:rotate(@from);}
		    to{transform:rotate(@to);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	}
	.rotateRound(@time:1s,@count:1,@ease:ease-in-out,@fillmode:forwards){
		.rotateRoundKeyframe(~`'rotateRound_'+Math.round(Math.random() * 1.0e8)`);
	}
	.rotateRoundKeyframe(@name){
		@keyframes @name{
		    from{transform:rotate(0);}
		    to{transform:rotate(360deg);}
		}
		animation-name:@name;
		animation-duration:@time;
		animation-timing-function:@ease;
		animation-fill-mode:@fillmode;
	  	animation-iteration-count:@count;
	}

//翻转
	.flipInX(@time:1s){
		.flipInXKeyframe(~`'flipInX_'+Math.round(Math.random() * 1.0e8)`);
	}
	.flipInXKeyframe(@name){
		@keyframes @name {
		  from {
		    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		    animation-timing-function: ease-in;
		    opacity: 0;
		  }

		  40% {
		    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		    animation-timing-function: ease-in;
		  }

		  60% {
		    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		    opacity: 1;
		  }

		  80% {
		    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		  }

		  to {
		    transform: perspective(400px);
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-fill-mode:both;
  		backface-visibility: visible !important;
	}

	.flipInY(@time:1s){
		.flipInYKeyframe(~`'flipInY_'+Math.round(Math.random() * 1.0e8)`);
	}
	.flipInYKeyframe(@name){
		@keyframes @name {
		  from {
		    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		    animation-timing-function: ease-in;
		    opacity: 0;
		  }

		  40% {
		    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		    animation-timing-function: ease-in;
		  }

		  60% {
		    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		    opacity: 1;
		  }

		  80% {
		    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		  }

		  to {
		    transform: perspective(400px);
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-fill-mode: both;
  		backface-visibility: visible !important;
	}

	.flipOutX(@time:0.75s){
		.flipOutXKeyframe(~`'flipOutX_'+Math.round(Math.random() * 1.0e8)`);
	}
	.flipOutXKeyframe(@name){
		@keyframes @name {
		  from {
		    transform: perspective(400px);
		  }

		  30% {
		    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		    opacity: 1;
		  }

		  to {
		    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		    opacity: 0;
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-fill-mode: both;
  		backface-visibility: visible !important;
	}

	.flipOutY(@time:0.75s){
		.flipOutYKeyframe(~`'flipOutY_'+Math.round(Math.random() * 1.0e8)`);
	}
	.flipOutYKeyframe(@name){
		@keyframes @name {
		  from {
		    transform: perspective(400px);
		  }

		  30% {
		    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
		    opacity: 1;
		  }

		  to {
		    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		    opacity: 0;
		  }
		}
		animation-name:@name;
		animation-duration:@time;
		animation-fill-mode: both;
  		backface-visibility: visible !important;
	}