Animations to use with my WooThemes Features blog post.

woothemes-features-animatinos.css

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}

	20% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	80% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
}

@-moz-keyframes fadeInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}

	20% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}

	80% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
}

@-o-keyframes fadeInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(20px);
	}

	20% {
		opacity: 1;
		-o-transform: translateX(0px);
	}

	80% {
		opacity: 1;
		-o-transform: translateX(0px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	20% {
		opacity: 1;
		transform: translateX(0px);
	}

	80% {
		opacity: 1;
		transform: translateX(0px);
	}
	
	100% {
		opacity: 0;
		transform: translateX(20px);
	}
}


@-webkit-keyframes fadeInRightDelay {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}

	20% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}

	40% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	60% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}

	80% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
}

@-moz-keyframes fadeInRightDelay {
	0% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}

	20% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}

	40% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}

	60% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}

	80% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
}

@-o-keyframes fadeInRightDelay {
	0% {
		opacity: 0;
		-o-transform: translateX(20px);
	}

	20% {
		opacity: 0;
		-o-transform: translateX(20px);
	}

	40% {
		opacity: 1;
		-o-transform: translateX(0px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(0px);
	}

	80% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
}

@keyframes fadeInRightDelay {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	20% {
		opacity: 0;
		transform: translateX(20px);
	}

	40% {
		opacity: 1;
		transform: translateX(0px);
	}

	60% {
		opacity: 1;
		transform: translateX(0px);
	}

	80% {
		opacity: 0;
		transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		transform: translateX(20px);
	}
}