Skip to content

lisaraujor/form-js-css-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Registration form using Pure JS and CSS Animation

Final prototype

image image

Challenges:

  • Make the form appear, smoothly, when the page opens
  • Make the fields appear from left to right, smoothing the input and making them come in distinct motions
  • When you click on Login, make the form exit the screen by going down
  • Remove form from HTML and not show scrolling while form is exiting screen
  • Add a different timing effect to the form output
  • Make form say no-no (vibrate) if there are empty fields.
  • Create some animated squares (that keep rotating) and that come out from below the screen (out of the field of vision) and go to the top of the screen (that is out of the field of vision too). Details: It must have different sizes, come out at different times, have different timing, continuous animation.

8 properties:

animation-name: animationname; -- Animation name animation-duration: 2s; -- Total animation time animation-delay: 3s; -- Time the animation takes to start animation-fill-mode: none; -- After or before the animation, what happens animation-play-state: running; -- Will it be running or pause animation-timing-function: ease; -- Animation progression (polka dot graphic) animation-direction: reverse; -- Animation direction animation-iteration-count: infinite;

To create an animation:

@keyframes animation-name{

from{

}
to{

}

}

Multiple animations on the same element

About

animated form with javascript and css animation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published