# Class 14

## Read: CSS Transforms, Transitions & Animations

### Answers

#### CSS Transforms

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

   - The transform property accepts a handful of different values, including rotate (rotaate the element 0 to 360 degrees), scale (change the appeared size of an element), translate (change the position of an element on a specified axis without interrupting the normal flow of the document). etc.

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

   - If you wanted to rotate an element, like a company logo on their homepage, you could use Rotate. Using a positive value will rotate an element clockwise (ie *transform: rotate(20deg);*), and using a negative value will rotate the element counterclockwise (ie *transform: rotate(-55deg);*).
  
#### CSS Transitions & Animations

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

   - The transition property is applied to an element which must at first have a change in state, and then it allows different styles to be identified for each state (for example the *transition-duration* transition property on the *:hover* change of state).
    
2. How does a CSS animation differ from a CSS transition?

   - A transition requires a trigger and only plays through once. An animation does not require a triggering action and can be set to loop (which can be repeated as many times as you want).

#### 8 simple CSS3 transitions that will wow your users

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

   - They are simple to implement, easy to control, and they can increase engagement on your website.
   
2. How this topic fit in with your long-term goals?

   - I am aware of UX and how engagement is an important thing to keep in mind. Again I feel my strengths lie in my front-end skills, so I feel I am likely to follow a career path along those lines. Becoming more accustomed to animations and the like will help with this.