css3动画如何让元素一开始是隐藏的

 1.最近做一个文字出场的动画效果，分解每个字母，依次从右侧出场，动画显示，就这个。

2.出现了一个问题：动画开始之前，dom结构是默认显示的，所以显示情况就是，文字从左到右依次消失，然后再出现设置的动画，最终解决办法是在绑定动画的地方加上

animation-fill-mode: both;/*最终完美解决*/

3.html

<span class="words-active flip"><span class="words-active flip">Horizontal Machining Center</span>

4.css

@keyframes flip-wave-1 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(500px) translateZ(0);
		transform: translateX(500px) translateZ(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateZ(0);
		transform: translateX(0) translateZ(0);
	}
}

.words-active.flip :nth-child(29n+1) {
	animation-fill-mode: both;
	display: inline-block;
	animation-duration: 1.5s;
	/*animation-delay: .05s;*/
	animation-name: flip-wave-1;
	animation-iteration-count: inherit
}

@keyframes flip-wave-2 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(500px) translateZ(0);
		transform: translateX(500px) translateZ(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateZ(0);
		transform: translateX(0) translateZ(0);
	}
}

.words-active.flip :nth-child(29n+2) {
	animation-fill-mode: both;
	display: inline-block;
	animation-duration: 1.5s;
	animation-delay: .1s;
	animation-name: flip-wave-2;
	animation-iteration-count: inherit
}

@keyframes flip-wave-3 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(500px) translateZ(0);
		transform: translateX(500px) translateZ(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateZ(0);
		transform: translateX(0) translateZ(0);
	}
}

.words-active.flip :nth-child(29n+3) {
	animation-fill-mode: both;
	display: inline-block;
	animation-duration: 1.5s;
	animation-delay: .15s;
	animation-name: flip-wave-3;
	animation-iteration-count: inherit
}

@keyframes flip-wave-4 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(500px) translateZ(0);
		transform: translateX(500px) translateZ(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateZ(0);
		transform: translateX(0) translateZ(0);
	}
}

.words-active.flip :nth-child(29n+4) {
	animation-fill-mode: both;
	display: inline-block;
	animation-duration: 1.5s;
	animation-delay: .2s;
	animation-name: flip-wave-4;
	animation-iteration-count: inherit
}

@keyframes flip-wave-5 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(500px) translateZ(0);
		transform: translateX(500px) translateZ(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateZ(0);
		transform: translateX(0) translateZ(0);
	}
}

.words-active.flip :nth-child(29n+5) {
	animation-fill-mode: both;
	display: inline-block;
	animation-duration: 1.5s;
	animation-delay: .25s;
	animation-name: flip-wave-5;
	animation-iteration-count: inherit