.dl-menu.dl-animate-out-1 { animation: MenuAnimOut1 0.4s linear forwards; } @keyframes MenuAnimOut1 { 50% { transform: translateZ(-250px) rotateY(30deg); } 75% { transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } .dl-menu.dl-animate-in-1 { animation: MenuAnimIn1 0.3s linear forwards; } @keyframes MenuAnimIn1 { 0% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { transform: translateZ(0px) rotateY(0deg); opacity: 1; } } $( '#dl-menu' ).dlmenu({ animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' } });