reading-notes

Reading

CSS Transforms

  1. What does a CSS transform allow the developer to do to an element?
    • allows for 2 and 3 dimensional manipulation of objects and layout
  2. Provide an example of a transform and how you could see that being used on a website.
    • <figure class="box-1">Box 1</figure> .box-1 {transform: rotate (-55deg);}
    • this would rotate the box -55 degrees. I would use this to add a bit more style and create some symbology on my website

CSS Transitions & Animations

  1. What does a CSS transition allow the developer to do to an element?
    • change the state of an element
      • :hover, :focus, :active, and :target pseudo-classes
      • transition-property, transition-duration, transition-timing-function, and transition-delay.
  2. How does a CSS animation differ from a CSS transition?
    • animations handle multiple changes to an elements state and transitions are typically for visual changes from one state to another and single state changes.

8 simple CSS3 transitions that will wow your users

  1. What are some benefits to using CSS transitions on websites?
    • countless possibilities for UX designers
    • simple implementation
    • a few lines of code will give you an awesome transition effect
    • user excitement and engagement
    • INCREASED conversions!
  2. How this topic fit in with your long-term goals?
    • i think I will focus on web design and UX design as I grow my business and my firm. Software development will be a branch of it but I love this front end engagement stuff.