Animação:

A simple animated form made with html and css.

This project was made to learn about the animation feature in css in the most simple way possible. The result of the attempt was good and the things made come to hand in other projects that i made.

Doing this project i was capable of learning a little about the keyframes and how the animation it's bind to the element and how the properties of the animation decide when and where to start, end, how long it takes to finish, start and what to do.

• The key frames control when the animation start and end with the time property that goes from 0% to 100%. 0% it's the beginning and 100% it's the end.
• We can give name to animation and then pass this name to the keyframes in order to give this animation the actions that we want.
• The property transform receive a lot of functions that can do all sort of things with the elements of the screen. But by now we only mess with the functions called translateX, scale
• scale change the size of the element to many times as the number given as argument
• translateX moves the element in the x-axis the distance given by the argument
• we also change the opacity of the element with opacity property to give it a fade-in animation

We learned to use transform in order to give movement to our animations. We learn to use opacity and scale to give a look of fade animation. We learn to use translateX to make the elements show up in the scene.

It's awesome to use html and css to build something colourful, fast, beautiful and smooth. It's really a powerful set of tools for any given web developer and it has a vast variety of material and content available. It makes me more and more interest in keep studying. Thanks for your attention and see you soon.