Difference between revisions of "Template:BIT-China/css/css-animation"

Revision as of 11:00, 14 October 2018 (view source) InspAlgo (Talk | contribs) (Created page with ".animated { animation-fill-mode: both; } /* ============================================== 控制 home_page.html 的 A.gif 的动画 ====================================...")		Latest revision as of 11:03, 14 October 2018 (view source) InspAlgo (Talk | contribs)
Line 2:		Line 2:
	animation-fill-mode: both;		animation-fill-mode: both;
	}		}
−
−	/*
−	==============================================
−
−	控制 home_page.html 的 A.gif 的动画
−
−	==============================================
−	*/
	@keyframes gifA-move {		@keyframes gifA-move {
	from {		from {
Line 70:		Line 62:
	animation-duration: 1s;		animation-duration: 1s;
	}		}
−	/*
−	==============================================
−
−	控制 home_page.html 的 A,left-nav,top-up 的动画 缩放以及改变透明度
−
−	==============================================
−	*/
	@keyframes imgA-nav-gradient {		@keyframes imgA-nav-gradient {
	from {		from {
Line 143:		Line 128:
	animation-duration: 1.6s;		animation-duration: 1.6s;
	}		}
−	/*
−	=============================================
−	右边横向进入
−	=============================================
−	*/
	@keyframes right-move {		@keyframes right-move {
	from {		from {
Line 196:		Line 176:
	animation-duration: 1.6s;		animation-duration: 1.6s;
	}		}
−	/*
−	=============================================
−	控制打分表旋转
−	=============================================
−	*/
	@keyframes table-rotate {		@keyframes table-rotate {
	from {		from {
Line 249:		Line 224:
	animation-duration: 1.6s;		animation-duration: 1.6s;
	}		}
−
−	/*
−	==============================================
−	左进
−	==============================================
−	*/
	@keyframes left-come {		@keyframes left-come {
	from {		from {
Line 303:		Line 272:
	animation-duration: 1.6s;		animation-duration: 1.6s;
	}		}
−
−	/*
−	==============================================
−	右上方进入，角度不是特别高
−	==============================================
−	*/
	@keyframes right-up-come {		@keyframes right-up-come {
	from {		from {
Line 357:		Line 320:
	animation-duration: 1s;		animation-duration: 1s;
	}		}
−	/*
−	=============================================
−	向上
−	=============================================
−	*/
	@keyframes up-come {		@keyframes up-come {
	from {		from {
Line 410:		Line 368:
	animation-duration: 1.6s;		animation-duration: 1.6s;
	}		}
−
−	/*
−	==============================================
−	剪切变形
−	==============================================
−	*/
−	@keyframes cut-shape {
−	from {
−	opacity: 0;
−	transform: scale(0);
−	sclip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
−	-webkit-transform: scale(0);
−	-moz-transform: scale(0);
−	-ms-transform: scale(0);
−	-o-transform: scale(0);
−	}
−
−	14% {
−	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
−	}
−
−	24% {
−	clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
−	}
−
−	28% {
−	clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
−	}
−
−	38% {
−	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
−	}
−
−	42% {
−	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
−	}
−
−	52% {
−	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
−	}
−
−	56% {
−	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
−	}
−
−	66% {
−	clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
−	}
−
−	70% {
−	clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
−	}
−
−	80% {
−	clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
−	}
−
−	84% {
−	clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
−	}
−
−	to {
−	opacity: 1;
−	clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
−	transform: scale(1);
−	-webkit-transform: scale(1);
−	-moz-transform: scale(1);
−	-ms-transform: scale(1);
−	-o-transform: scale(1);
−	}
−	}
−
−	.cut-shape {
−	animation-name: cut-shape;
−	animation-duration: 1.6s;
−	}
−	@keyframes cut-shape-back {
−	from {
−	opacity: 1;
−	clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
−	transform: scale(1);
−	-webkit-transform: scale(1);
−	-moz-transform: scale(1);
−	-ms-transform: scale(1);
−	-o-transform: scale(1);
−	}
−
−	14% {
−	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
−	}
−
−	24% {
−	clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
−	}
−
−	28% {
−	clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
−	}
−
−	38% {
−	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
−	}
−
−	42% {
−	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
−	}
−
−	52% {
−	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
−	}
−
−	56% {
−	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
−	}
−
−	66% {
−	clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
−	}
−
−	70% {
−	clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
−	}
−
−	80% {
−	clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
−	}
−
−	84% {
−	clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
−	}
−
−	to {
−	opacity: 0;
−	transform: scale(0);
−	sclip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
−	-webkit-transform: scale(0);
−	-moz-transform: scale(0);
−	-ms-transform: scale(0);
−	-o-transform: scale(0);
−	}
−	}
−
−	.cut-shape-back {
−	animation-name: cut-shape-back;
−	animation-duration: 1.6s;
−	}
−
−	/*
−	==============================================
−	摆动
−	==============================================
−	*/
	@keyframes bear-swing {		@keyframes bear-swing {
	from {		from {
Line 628:		Line 434:
	animation-duration: 1.6s;		animation-duration: 1.6s;
	}		}
−	/*
−	==============================================
−
−	控制 team 页面的切换动画
−
−	==============================================
−	*/
	@keyframes team-up-Z {		@keyframes team-up-Z {
	40% {		40% {
Line 665:		Line 464:
	animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);		animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
	}		}
−
−	/*
−	=======================================
−
−	nope
−
−	=======================================
−	*/
	@keyframes nope {		@keyframes nope {
	0% {		0% {

---

Latest revision as of 11:03, 14 October 2018

.animated {

 animation-fill-mode: both;

} @keyframes gifA-move {

 from {
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

 40% {
   transform: translateY(-400px) scale(.2);
   -webkit-transform: translateY(-400px) scale(.2);
   -moz-transform: translateY(-400px) scale(.2);
   -ms-transform: translateY(-400px) scale(.2);
   -o-transform: translateY(-400px) scale(.2);
 }

 to {
   transform: translateY(-500px) scale(.1);
   -webkit-transform: translateY(-500px) scale(.1);
   -moz-transform: translateY(-500px) scale(.1);
   -ms-transform: translateY(-500px) scale(.1);
   -o-transform: translateY(-500px) scale(.1);
 }

}

.gifA-move {

 animation-name: gifA-move;
 animation-duration: 1.5s;

} @keyframes gifA-move-back {

 from {
   transform: translateY(-500px) scale(.1);
   -webkit-transform: translateY(-500px) scale(.1);
   -moz-transform: translateY(-500px) scale(.1);
   -ms-transform: translateY(-500px) scale(.1);
   -o-transform: translateY(-500px) scale(.1);
 }

 10% {
   transform: translateY(-400px) scale(.2);
   -webkit-transform: translateY(-400px) scale(.2);
   -moz-transform: translateY(-400px) scale(.2);
   -ms-transform: translateY(-400px) scale(.2);
   -o-transform: translateY(-400px) scale(.2);
 }

 to {
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

}

.gifA-move-back {

 animation-name: gifA-move-back;
 animation-duration: 1s;

} @keyframes imgA-nav-gradient {

 from {
   opacity: 0;
   transform: scale(0);
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
 }

 30% {
   opacity: 0;
   transform: scale(.4);
   -webkit-transform: scale(.4);
   -moz-transform: scale(.4);
   -ms-transform: scale(.4);
   -o-transform: scale(.4);
 }

 to {
   opacity: 1;
   transform: scale(1);
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
 }

}

.imgA-nav-gradient {

 animation-name: imgA-nav-gradient;
 animation-duration: 1.6s;

} @keyframes imgA-nav-gradient-back {

 from {
   opacity: 1;
   transform: scale(1);
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
 }

 20% {
   opacity: 0;
   transform: scale(.4);
   -webkit-transform: scale(.4);
   -moz-transform: scale(.4);
   -ms-transform: scale(.4);
   -o-transform: scale(.4);
 }

 to {
   opacity: 0;
   transform: scale(0);
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
 }

}

.imgA-nav-gradient-back {

 animation-name: imgA-nav-gradient-back;
 animation-duration: 1.6s;

} @keyframes right-move {

 from {
   opacity: 0;
   transform: translateX(500px);
   -webkit-transform: translateX(500px);
   -moz-transform: translateX(500px);
   -ms-transform: translateX(500px);
   -o-transform: translateX(500px);
 }

 to {
   opacity: 1;
   transform: translateX(0px);
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -ms-transform: translateX(0px);
   -o-transform: translateX(0px);
 }

}

.right-move {

 animation-name: right-move;
 animation-duration: 1.6s;

} @keyframes right-move-back {

 from {
   opacity: 1;
   transform: translateX(0px);
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -ms-transform: translateX(0px);
   -o-transform: translateX(0px);
 }

 to {
   opacity: 0;
   transform: translateX(500px);
   -webkit-transform: translateX(500px);
   -moz-transform: translateX(500px);
   -ms-transform: translateX(500px);
   -o-transform: translateX(500px);
 }

}

.right-move-back {

 animation-name: right-move-back;
 animation-duration: 1.6s;

} @keyframes table-rotate {

 from {
   opacity: 0;
   transform: rotate(0deg) scale(0);
   -webkit-transform: rotate(0deg) scale(0);
   -moz-transform: rotate(0deg) scale(0);
   -ms-transform: rotate(0deg) scale(0);
   -o-transform: rotate(0deg) scale(0);
 }

 to {
   opacity: 1;
   transform: rotate(721deg) scale(1);
   -webkit-transform: rotate(721deg) scale(1);
   -moz-transform: rotate(721deg) scale(1);
   -ms-transform: rotate(721deg) scale(1);
   -o-transform: rotate(721deg) scale(1);
 }

}

.table-rotate {

 animation-name: table-rotate;
 animation-duration: 1.6s;

} @keyframes table-rotate-back {

 from {
   opacity: 1;
   transform: rotate(721deg) scale(1);
   -webkit-transform: rotate(721deg) scale(1);
   -moz-transform: rotate(721deg) scale(1);
   -ms-transform: rotate(721deg) scale(1);
   -o-transform: rotate(721deg) scale(1);
 }

 to {
   opacity: 0;
   transform: rotate(0deg) scale(0);
   -webkit-transform: rotate(0deg) scale(0);
   -moz-transform: rotate(0deg) scale(0);
   -ms-transform: rotate(0deg) scale(0);
   -o-transform: rotate(0deg) scale(0);
 }

}

.table-rotate-back {

 animation-name: table-rotate-back;
 animation-duration: 1.6s;

} @keyframes left-come {

 from {
   opacity: 0;
   transform: translateX(-500px) scale(0);
   -webkit-transform: translateX(-500px) scale(0);
   -moz-transform: translateX(-500px) scale(0);
   -ms-transform: translateX(-500px) scale(0);
   -o-transform: translateX(-500px) scale(0);
 }

 to {
   opacity: 1;
   transform: translateX(0) scale(1);
   -webkit-transform: translateX(0) scale(1);
   -moz-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
   -o-transform: translateX(0) scale(1);
 }

}

.left-come {

 animation-name: left-come;
 animation-duration: 1.6s;

} @keyframes left-come-back {

 from {
   opacity: 1;
   transform: translateX(0) scale(1);
   -webkit-transform: translateX(0) scale(1);
   -moz-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
   -o-transform: translateX(0) scale(1);
 }

 to {
   opacity: 0;
   transform: translateX(-500px) scale(0);
   -webkit-transform: translateX(-500px) scale(0);
   -moz-transform: translateX(-500px) scale(0);
   -ms-transform: translateX(-500px) scale(0);
   -o-transform: translateX(-500px) scale(0);
 }

}

.left-come-back {

 animation-name: left-come-back;
 animation-duration: 1.6s;

} @keyframes right-up-come {

 from {
   opacity: 0;
   transform: translate(500px,-500px) scale(0);
   -webkit-transform: translate(500px,-500px) scale(0);
   -moz-transform: translate(500px,-500px) scale(0);
   -ms-transform: translate(500px,-500px) scale(0);
   -o-transform: translate(500px,-500px) scale(0);
 }

 to {
   opacity: 1;
   transform: translate(0,0) scale(1);
   -webkit-transform: translate(0,0) scale(1);
   -moz-transform: translate(0,0) scale(1);
   -ms-transform: translate(0,0) scale(1);
   -o-transform: translate(0,0) scale(1);
 }

}

.right-up-come {

 animation-name: right-up-come;
 animation-duration: 1.6s;

} @keyframes right-up-come-back {

 from {
   opacity: 1;
   transform: translate(0,0) scale(1);
   -webkit-transform: translate(0,0) scale(1);
   -moz-transform: translate(0,0) scale(1);
   -ms-transform: translate(0,0) scale(1);
   -o-transform: translate(0,0) scale(1);
 }

 to {
   opacity: 0;
   transform: translate(500px,-500px) scale(0);
   -webkit-transform: translate(500px,-500px) scale(0);
   -moz-transform: translate(500px,-500px) scale(0);
   -ms-transform: translate(500px,-500px) scale(0);
   -o-transform: translate(500px,-500px) scale(0);
 }

}

.right-up-come-back {

 animation-name: right-up-come-back;
 animation-duration: 1s;

} @keyframes up-come {

 from {
   opacity: 0;
   transform: translateY(500px) scale(0);
   -webkit-transform: translateY(500px) scale(0);
   -moz-transform: translateY(500px) scale(0);
   -ms-transform: translateY(500px) scale(0);
   -o-transform: translateY(500px) scale(0);
 }

 to {
   opacity: 1;
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

}

.up-come {

 animation-name: up-come;
 animation-duration: 1.6s;

} @keyframes up-come-back {

 from {
   opacity: 1;
   transform: translateY(0) scale(1);
   -webkit-transform: translateY(0) scale(1);
   -moz-transform: translateY(0) scale(1);
   -ms-transform: translateY(0) scale(1);
   -o-transform: translateY(0) scale(1);
 }

 to {
   opacity: 0;
   transform: translateY(500px) scale(0);
   -webkit-transform: translateY(500px) scale(0);
   -moz-transform: translateY(500px) scale(0);
   -ms-transform: translateY(500px) scale(0);
   -o-transform: translateY(500px) scale(0);
 }

}

.up-come-back {

 animation-name: up-come-back;
 animation-duration: 1.6s;

} @keyframes bear-swing {

 from {
   opacity: 0;
   transform: scale(0) rotate(-50deg);
   -webkit-transform: scale(0) rotate(-50deg);
   -moz-transform: scale(0) rotate(-50deg);
   -ms-transform: scale(0) rotate(-50deg);
   -o-transform: scale(0) rotate(-50deg);
 }

 50% {
   opacity: .5;
   transform: scale(0.4) rotate(50deg);
   -webkit-transform: scale(0.4) rotate(50deg);
   -moz-transform: scale(0.4) rotate(50deg);
   -ms-transform: scale(0.4) rotate(50deg);
   -o-transform: scale(0.4) rotate(50deg);
 }

 to {
   opacity: 1;
   transform: scale(1) rotate(0deg);
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
 }

}

.bear-swing {

 animation-name: bear-swing;
 animation-duration: 1.6s;

} @keyframes bear-swing-back {

 from {
   opacity: 1;
   transform: scale(1) rotate(0deg);
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
 }

 50% {
   opacity: .5;
   transform: scale(0.4) rotate(50deg);
   -webkit-transform: scale(0.4) rotate(50deg);
   -moz-transform: scale(0.4) rotate(50deg);
   -ms-transform: scale(0.4) rotate(50deg);
   -o-transform: scale(0.4) rotate(50deg);
 }

 to {
   opacity: 0;
   transform: scale(0) rotate(-50deg);
   -webkit-transform: scale(0) rotate(-50deg);
   -moz-transform: scale(0) rotate(-50deg);
   -ms-transform: scale(0) rotate(-50deg);
   -o-transform: scale(0) rotate(-50deg);
 }

}

.bear-swing-back {

 animation-name: bear-swing-back;
 animation-duration: 1.6s;

} @keyframes team-up-Z {

 40% {
   transform: translateZ(800px);
   -webkit-transform: translateZ(800px);
   -moz-transform: translateZ(800px);
   -ms-transform: translateZ(800px);
   -o-transform: translateZ(800px);
 }

} @keyframes team-up-Y {

 to {
   transform: translateY(-800px);
   -webkit-transform: translateY(-800px);
   -moz-transform: translateY(-800px);
   -ms-transform: translateY(-800px);
   -o-transform: translateY(-800px);
 }

}

.team-up {

 animation-name: team-up-Z;
 animation-duration: .4s;
 animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

}

.team-up::after {

 animation-name: team-up-Y;
 animation-duration: .4s;
 animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

} @keyframes nope {

 0% {
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }

 6.5% {
   transform: translateX(-7px) rotateY(-10deg);
   -webkit-transform: translateX(-7px) rotateY(-10deg);
   -moz-transform: translateX(-7px) rotateY(-10deg);
   -ms-transform: translateX(-7px) rotateY(-10deg);
   -o-transform: translateX(-7px) rotateY(-10deg);
 }

 18.5% {
   transform: translateX(6px) rotateY(8deg);
   -webkit-transform: translateX(6px) rotateY(8deg);
   -moz-transform: translateX(6px) rotateY(8deg);
   -ms-transform: translateX(6px) rotateY(8deg);
   -o-transform: translateX(6px) rotateY(8deg);
 }

 31.5% {
   transform: translateX(-4px) rotateY(-6deg);
   -webkit-transform: translateX(-4px) rotateY(-6deg);
   -moz-transform: translateX(-4px) rotateY(-6deg);
   -ms-transform: translateX(-4px) rotateY(-6deg);
   -o-transform: translateX(-4px) rotateY(-6deg);
 }

 43.5% {
   transform: translateX(3px) rotateY(4deg);
   -webkit-transform: translateX(3px) rotateY(4deg);
   -moz-transform: translateX(3px) rotateY(4deg);
   -ms-transform: translateX(3px) rotateY(4deg);
   -o-transform: translateX(3px) rotateY(4deg);
 }

 50% {
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }

 100% {
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }

}

.nope {

 animation-name: nope;
 animation-duration: 3s;
 animation-timing-function: ease-in-out;

}