reading-notes

Reading 14 - CSS Effects

Source: Learn to Code - CSS Transforms

Q1 What does a CSS transform allow the developer to do to an element?

A CSS transform property lets you transform an element in either 2d or 3d space. That means you can rotate, scale, move, or skew elements.

Q2 Provide an example of a transform and how you could see that being used on a website.

One example is transform rotate. This could be used to draw attention to an element by making it positioned in a different angle outside of the usual gridlike system.

Source: Learn to Code - Transitions and Animations

Q3 What does a CSS transition allow the developer to do to an element?

A CSS transition property lets you transition an element’s appearance from one appearance to another.

Q4 How does a CSS animation differ from a CSS transition?

A transition occurs over a short period of time, a transform is a static change.

Source: Web Designer Depot - 8 simple CSS3 transitions that will wow your users

Q5 What are some benefits to using CSS transitions on websites?

CSS transitions can excite your users, increase engagement and lead to increased user interaction, such as filling out forms or making a purchase.

Q6 How this topic fit in with your long-term goals?

In the shorter term, I would like to use these to make the final presentation ‘pop’, and in the longer term I would like to use these tools to make the things that I develop engaging and effective.

Things I want to know more about

How do you combine the transformations, transitions, and animations effectively to wow users without overwhelming them oor their systems?