Subtle Menu Animation

Developer
Kyle Brumm
Size
2,923 Kb
Views
14,168
  1. Subtle Menu Animation Previews
  2. Subtle Menu Animation HTML Codes
  3. Subtle Menu Animation CSS Codes
  4. Subtle Menu Animation JS Codes

How do I make an subtle menu animation?

A simple animation to change the hamburger icon, into an X.. What is a subtle menu animation? How do you make a subtle menu animation? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Subtle Menu Animation Previews
IQ Test

Subtle Menu Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle Menu Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" data-dropdown="nav-drop" class="menu-bars x"><div class="main-bar"></div></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Subtle Menu Animation - Script Codes CSS Codes

@-webkit-keyframes $animationName { 0% { background: #eeeeee; } 50%, 100% { background: transparent; }
}
@-moz-keyframes $animationName { 0% { background: #eeeeee; } 50%, 100% { background: transparent; }
}
@-o-keyframes $animationName { 0% { background: #eeeeee; } 50%, 100% { background: transparent; }
}
@keyframes $animationName { 0% { background: #eeeeee; } 50%, 100% { background: transparent; }
}
@-webkit-keyframes $animationName { 0% { top: 0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
}
@-moz-keyframes $animationName { 0% { top: 0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
}
@-o-keyframes $animationName { 0% { top: 0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
}
@keyframes $animationName { 0% { top: 0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
}
@-webkit-keyframes $animationName { 0% { top: -0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-moz-keyframes $animationName { 0% { top: -0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@-o-keyframes $animationName { 0% { top: -0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
}
@keyframes $animationName { 0% { top: -0.625rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { top: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
}
.menu-bars { position: relative; display: inline-block; z-index: 9999; margin-left: 1rem; padding: 1.8rem 1rem; background: #222222;
}
.menu-bars .main-bar { position: relative; width: 2.2rem; height: 0.3125rem; background: #eeeeee; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s;
}
.menu-bars .main-bar:before, .menu-bars .main-bar:after { position: absolute; content: ''; display: block; height: 0.3125rem; width: 2.2rem; background: #eeeeee; z-index: -1; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);
}
.menu-bars .main-bar:before { top: 0.625rem;
}
.menu-bars .main-bar:after { top: -0.625rem;
}
.menu-bars.open .main-bar { background: transparent; -webkit-animation: mainTrans 0.5s; -moz-animation: mainTrans 0.5s; -o-animation: mainTrans 0.5s; animation: mainTrans 0.5s;
}
.menu-bars.open .main-bar:before { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: beforeTrans 0.5s; -moz-animation: beforeTrans 0.5s; -o-animation: beforeTrans 0.5s; animation: beforeTrans 0.5s;
}
.menu-bars.open .main-bar:after { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: afterTrans 0.5s; -moz-animation: afterTrans 0.5s; -o-animation: afterTrans 0.5s; animation: afterTrans 0.5s;
}

Subtle Menu Animation - Script Codes JS Codes

$('body').on('click', '.menu-bars', function() { $(this).toggleClass('open');
});
Subtle Menu Animation - Script Codes
Subtle Menu Animation - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 3
Size 2,923 Kb
Views 14,168
Do you need developer help for Subtle Menu Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Brumm (kjbrum) Script Codes
Name
3D Parallax Boxes
_juice.scss
Line Button Hover Effects
Button Hover Effects
Vue.js Lazy Loading
CSS3 Stylish Checkboxes
Simple Tabs Concept
Reactive Dot Grid - Canvas
Wavy Loading Animations
_toolbox.scss
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!