marisabrantley / form-wave-animation

This project involved building a simple login form with a wave effect on the labels using CSS transitions, transition delay, and JavaScript.

Form Wave Annimation Project

This project involved building a simple login form with a wave effect on the labels. The letters of the label go up in a wave-like fashion when a field is clicked, and return to their original positions when the cursor clicks elsewhere.

Objective

• Using JavaScript, wrap a span around each label.
• In CSS, add a transition so that the label moves up when focusing on the input.
• Also add dynamic transition delay for the letters' wave effect.

form-wave-animation.mov

Launch

View the Form Animation Project here: https://marisabrantley.github.io/form-wave-animation/

Class

Brad Traversy's Udemy Course "50 Projects in 50 Days"
https://www.udemy.com/course/50-projects-50-days/