Here is a simple example of how to animate a hamburger menu icon in CSS using the :before and :after pseudo-elements to create the lines of the hamburger. This animation will transform the hamburger icon into a cross when clicked.
Here’s the related HTML:
```
```
And the CSS:
```
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
justify: content: center;
height: 100vh;
}
.hamburger-menu {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
justify-content: center;
width: 50px;
height: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: .5s ease-in-out;
}
.hamburger-menu .bar {
width: 35px;
height: 5px;
background-color: #333;
border-radius: 9px;
opacity: 1;
position: relative;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger-menu .bar:before, .hamburger-menu .bar:after {
content: ‘’;
position: absolute;
width: 35px;
height: 5px;
background-color: #333;
border-radius: 9px;
opacity: 1;
transition: .25s ease-in-out;
}
.hamburger-menu .bar:before {
transform: translateY(-10px);
}
.hamburger-menu .bar:after {
transform: translateY(10px);
}
/* Animation effect */
.hamburger-menu.active .bar {
transform: rotate(45deg);
}
.hamburger-menu.active .bar:before {
transform: rotate(45deg);
}
.hamburger-menu.active .bar:after {
transform: rotate(-45deg);
}
```
And a bit of JavaScript to handle the click event:
```
document.querySelector(‘.hamburger-menu’).addEventListener(‘click’, function() {
this.classList.toggle(‘active’);
});
```
The animation effect is created by rotating the lines of the hamburger icon when the button is clicked. The top and bottom lines are rotated by 45 degrees in opposite directions to create an X shape, and the middle line is hidden.
