CSS animation on input focus: add an animated outline with CSS and JavaScript

In this CSS animation tutorial, I explain how to use the CSS background-image property to add an outline to your input fields. With the help of JavaScript we can then trigger the CSS animation every time one of the input fields gets focused on.

Source code:
https://github.com/patriciamolnar/tutorials/tree/master/Input%20Focus%20Animation
Poppins Font:
https://fonts.google.com/specimen/Poppins
Tailwind CSS sr-only class information:
https://tailwindcss.com/docs/screen-readers

Watch other CSS animations and transitions tutorials that I created:
- SVG animation: animate an SVG with CSS and JavaScript:
https://youtu.be/eSpHvESNcZQ

- CSS text animation with variable fonts:
https://youtu.be/JbjA4oE4Ma4

- Add underline animation to your website with JavaScript Intersection Observer API:
https://www.youtube.com/watch?v=B7laJa9KUaI&t=1s

I put out web development and design tutorials every 1 - 2 weeks, so subscribe for more:
https://www.youtube.com/channel/UCnTVj2blZd9xpbo2t7ARw/?sub_confirmation=1

I am also on social media, so feel free to connect and reach out:
Twitter: https://twitter.com/pmcoding
Instagram: https://instagram.com/pmcoding
CodePen: https://codepen.io/patriciamolnar

css animationcssinput focus animation