Hamburger Menu to Close Icon | CSS Animation
22.9K views · 2020-04-22
UI DesignProduct Design
New to CSS Grid? Learn the basics here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs
In this video I go over how to animate a hamburger menu into a close icon. I show you how to modify a checkbox by using a label and then add pseudo elements to transform how it appears. Then by adding a transition property the icon appears to actual animate from one state to the other.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/NWGWmPZ
In this video I show you:
0:35 - HTML Code
1:50 - How to add a checkbox to the HTML
2:23 - How to use the label tag
3:05 - CSS Code
5:14 - How to add pseudo elements
5:57 - How to use ::before and ::after
7:31 - How to use :checked
8:28 - How to animate pseudo elements
9:41 - How to use transform rotate
10:29 - How to use transform origin
11:34 - How to add a transition
13:34 - How to remove the checkbox
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
#cssanimation #hamburgertocloseicon #iconanimation
In this video I go over how to animate a hamburger menu into a close icon. I show you how to modify a checkbox by using a label and then add pseudo elements to transform how it appears. Then by adding a transition property the icon appears to actual animate from one state to the other.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/NWGWmPZ
In this video I show you:
0:35 - HTML Code
1:50 - How to add a checkbox to the HTML
2:23 - How to use the label tag
3:05 - CSS Code
5:14 - How to add pseudo elements
5:57 - How to use ::before and ::after
7:31 - How to use :checked
8:28 - How to animate pseudo elements
9:41 - How to use transform rotate
10:29 - How to use transform origin
11:34 - How to add a transition
13:34 - How to remove the checkbox
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
#cssanimation #hamburgertocloseicon #iconanimation