CodeHQ

Slide up animation for active state | CSS

This is a great addition to jQuery tabs, for when you want to animate the new active tab body.

@keyframes tabSlide{
	0% {
		opacity: 0;
		-moz-transform:translateY(30px);
		-webkit-transform:translateY(30px);
		-o-transform:translateY(30px);
		-ms-transform:translateY(30px);
		transform:translateY(30px)
	}
	100% {
		opacity:1;
		-moz-transform:translateY(0px);
		-webkit-transform:translateY(0px);
		-o-transform:translateY(0px);
		-ms-transform:translateY(0px);
		transform:translateY(0px)
	}
}

.active-tab {
	animation-name: tabSlide;
    animation-duration: 500ms;
    animation-timing-function: ease;
}