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;
}