Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

HTML & CSS Animations can bring your webpage to life! In this tutorial, we look at a mobile menu navbar animation and learn how to reverse the animation keyframes using only HTML & CSS. No Javascript needed!

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- The Complete Web Designer: https://bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

CSS for Beginners full course https://youtu.be/n4R2E7O-Ngo

Starter & Completed Code https://github.com/gitdagray/css_course (all the way at the bottom of the page - the bonus lesson!)

Discord https://discord.gg/neKghyefqh

Course Updates https://courses.davegray.codes/

HTML & CSS Animations | Reverse Mobile Menu Navbar

(00:00) Intro
(00:25) Welcome
(00:45) Starter Code & Recommendations
(01:41) Current Functionality
(02:35) header styles
(03:44) Picking darker colors
(04:51) HTML additions
(07:06) Close button styles
(08:47) Changing selectors
(11:24) Close button strategy
(12:44) Reverse the animation
(14:30) List changes
(15:19) Scrolling content
(16:32) Media query to remove the mobile menu

Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Visual Studio Code (VS Code): https://code.visualstudio.com/
Live Server VS Code Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
W3C CSS Validator: https://jigsaw.w3.org/css-validator/
Specificity Calculator: https://specificity.keegan.st/
HTML Special Characters and Entities: https://unicode-table.com
CanIUse.com: https://caniuse.com/

References:
BIG List of CSS Resources: https://github.com/gitdagray/css_course
MDN - CSS Transform: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
MDN - CSS Transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
MDN - CSS Animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about HTML & CSS Only Animations and building an Animated Mobile Menu helpful? If so, please share. Let me know your thoughts in the comments.

#html #css #animations