reading-notes

Class 201.14

Notes

Readings

• CSS Transforms
• CSS Transitions & Animations
• 8 simple CSS3 transitions that will wow your users
• Pure CSS Bounce Animation
• 6 Buttons animated
• CSS3 Animations: Keyframes
• 404

Q&A’s

CSS Transforms

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

   they allow developers to visually manipulate elements in 2D or 3D space without affecting the normal document flow. Transforms can rotate, scale, skew, or translate elements.

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

   • Scale an element larger on hover for a zoom effect.
   • Skew a banner element to add some visual flair.
   • Translate an element’s position on click to animate it sliding over.

CSS Transitions & Animations

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

   allow one to animate smooth changes from one CSS property value to another over a specified duration. e.g. they can animate size, position, color, opacity, etc. of elements.

2. How does a CSS animation differ from a CSS transition?

   CSS transitions animate between just two states, like hover to not hover. CSS animations can define multiple keyframes to animate.

8 simple CSS3 transitions that will wow your users

1. What are some benefits to using CSS transitions on websites?

   • Smoother and more performant animations compared to JavaScript
   • Easier to declare animations directly in CSS
   • Allows animating between any CSS property changes
   • Improves user experience with subtle motion cues

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

   A non-static page is always more impressive than a static page; I aim to use it to add some flavor to sites that I create

References

• Google Bard and ChatGPT

This site is open source. Improve this page.