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

Veröffentlicht am: 25 Oktober 2021
auf dem Kanal: pmCodingTutorials

2,751

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.

Blog post for written step by step explanation: https://www.pmcoding.co.uk/posts/inpu...

Source code:
https://github.com/patriciamolnar/tut...
Poppins Font:
https://fonts.google.com/specimen/Pop...
Tailwind CSS sr-only class information:
https://tailwindcss.com/docs/screen-r...

Watch other CSS animations and transitions tutorials that I created:
SVG animation: animate an SVG with CSS and JavaScript:
   • SVG animation: animate an SVG icon wi...

CSS text animation with variable fonts:
   • CSS Text Animation with Variable Font...

Add underline animation to your website with JavaScript Intersection Observer API:
   • Animated Underline using Intersection...

I put out web development and design tutorials every 1 - 2 weeks, so subscribe for more:
   / channel

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

Auf dieser Seite können Sie das Online-Video CSS animation on input focus: add an animated outline with CSS and JavaScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer pmCodingTutorials 25 Oktober 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 2,751 Mal angesehen und es wurde von 55 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

173,676

1.9K