reading-notes

Code Fellows 201

Day 14 Notes

Reading

What Google Learned From Its Quest to Build the Perfect Team

Reading

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

The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.

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

If I was allowing users to put an image on a 3-d opbject for a preview of a product to be produced; like shoes or or a painted box

CSS Transitions & Animations

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

With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.
Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.

How does a CSS animation differ from a CSS transition?

As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.

8 simple CSS3 transitions that will wow your users

What are some benefits to using CSS transitions on websites?

Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. Also add life to your UI and smiles to your users’ faces.

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

If I begin to design websites, it will be critical to make the site engaging and interesting for users

Bookmark/Skim

Pure CSS Bounce Animation

6 Buttons animated

CSS3 Animations: Keyframes