html - CSS - Remove Start Animation -
let me off before ask question. not want use jquery.
i want menu grow , shrink on hover so:
@keyframes menugrow { 0% { width:25px; height:25px; } 25% { width:20%; height:25px; } 100% { height:100vh; width:20%; } } and shrink so:
@keyframes menushrink { 0% { width:20%; height:100vh; } 75% { width:20%; height:25px; } 100% { height:25px; width:25px; } } and here's have activate these two:
.menu { background:#1a1a1a; width:25px; height:25px; animation: menushrink 0.3s linear; } .menu:hover { animation: menugrow 0.3s linear; height:100vh; width:20%; } all want there no animation when page loaded. here's jsbin project.
i know it's weird i'm answering own question.
i figured out answer @daemedeor. here's final result. did put onmouseout directed javascript function menuout() (obviously change that, chose name). javascript code ended being:
function menuout() { document.getelementbyid("menu").classname += " menuanimate"; } and html code was:
<!doctype html> <html> <head> <title>menu</title> </head> <body> <div class="menu" onmouseout="menuout()" id="menu"> </div> </body> </html> and last not least css:
@keyframes menugrow { 0% { width:50px; height:50px; } 25% { width:30%; height:50px; } 100% { height:100vh; width:30%; } } @keyframes menushrink { 0% { width:30%; height:100vh; } 75% { width:30%; height:50px; } 100% { height:50px; width:50px; } } .menu { background:#1a1a1a; width:50px; height:50px; } .menu:hover { animation: menugrow 0.3s linear; height:100vh; width:30%; } body { margin:0px; } .menuanimate { animation:menushrink 0.3s linear; }
Comments
Post a Comment