Difference between revisions of "Template:CSS UCL99"
Superjack15 (Talk | contribs) (Created page with "<div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigger">Open Menu</button> <ul class="dl-menu"> <li> <a href="#">Item 1</a> <ul class="dl-submenu"> <li...") |
Superjack15 (Talk | contribs) |
||
| Line 1: | Line 1: | ||
| + | <html> | ||
<div id="dl-menu" class="dl-menuwrapper"> | <div id="dl-menu" class="dl-menuwrapper"> | ||
<button class="dl-trigger">Open Menu</button> | <button class="dl-trigger">Open Menu</button> | ||
| Line 66: | Line 67: | ||
animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' } | animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' } | ||
}); | }); | ||
| + | |||
| + | </html> | ||
Revision as of 18:16, 26 July 2015
.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' } });