Animations are an excellent tool for every web designer. It can take a boring site and make it enjoyable. Transitions and animations will be used in most of the sites I will design to give the site life and make it look more professional.
#Reading
CSS Transforms
What does a CSS transform allow the developer to do to an element?
It will enable the developer to set several different properties to change something about elements, such as translate, which can relocate where the image is located on the window. In addition, it allows for animations and transitions to changes.
Provide an example of a transformation and how you could see that being used on a website.
you can transform:translateY to move a button up a few pixels, add a shadow, and a transition. It will appear as if the button is lifting off the screen a bit when the mouse hovers over it.
What does a CSS transition allow the developer to do to an element?
Transition, when applied to the parent element (not the listener where the transform is applied) will slowly move into the new element property.
How does a CSS animation differ from a CSS transition?
CSS animation uses keyframes to set breakpoints and change properties frame by frame. Transitions move to the new property with a set timer and a style applied to how it transitions, such as “ease-in.”
8 simple CSS3 transitions that will wow your users
What are some benefits of using CSS transitions on websites?
Transitions on a website can bring a website to life. They can make a call to action button more enticing to click; colors can slowly change, so it’s not shocking to a user to have it change all of a sudden. A gradual smooth change is a better experience for the user.
How does this topic fit in with your long-term goals?
Transitions and animations will be used in most of the sites that I will design to give the site life and make it look more professional.