Reading
- What does a CSS transform allow the developer to do to an element?
- allows for 2 and 3 dimensional manipulation of objects and layout
- 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
- 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
.
- 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
- 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!
- 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.