CSS Transforms, Transitions & Animations

CSS Transforms

What does a CSS transform allow the developer to do to an element? The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Provide an example of a transform and how you could see that being used on a website. Transform could be used to rotate a logo, so when a uaser logs on they are greeted with an animated logo.

CSS Transitions & Animations

What does a CSS transition allow the developer to do to an element? CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

How does a CSS animation differ from a CSS transition? CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. For instance, a transition could be used to make an icon fade in, change color, grow or shrink, or spin. Animation would be used for a cartoon character whose mouth is animated to make syllable movements.

8 simple CSS3 transitions that will wow your users

What are some benefits to using CSS transitions on websites? CSS transitions are easy ways to bring a level of livliness and movement to a website. They catch the eye by incorporating changes in light, color, and movement. This can help captivate the attention of users.

How this topic fit in with your long-term goals? I would like to not only make functional apps and programs, but would like them to be used. By incorporating visual movement into the user expereience, it may be more likely that the apps I work on are enjoyed and adopted by more people. Anything that can be done to make an application more engaging or interesting increase the likelihood of its success.