CSS

Index

Home
CSS Transforms
CSS Transitions & Animations
8 simple CSS3 transitions that will wow your users

CSS Transforms

1. What does a CSS transform allow the developer to do to an element?
   • Transform the size and position of elements in 2D and 3D.
2. Provide an example of a transform and how you could see that being used on a website.
   • After clicking on a button or other interface, smoothly transforming the position and size to give a visual fluidity to the transition.

CSS Transitions & Animations

1. What does a CSS transition allow the developer to do to an element?
   • Transition from one state to another. For example, hover-over to clicked. Transforming allows the developer to create transition effect, over time if desired, from one state to the other.
     • background-color
     • background-position
     • border-color
     • border-width
     • border-spacing
     • bottom
     • clip
     • color
     • cropfont-size
     • font-weight
     • height
     • left
     • letter-spacing
     • line-height
     • margin
     • max-height
     • max-width
     • min-height
     • min-width
     • opacity
     • outline-color
     • outline-offset
     • outline-width
     • padding
     • right
     • text-indent
     • text-shadow
     • top
     • vertical-align
     • visibility
     • width
     • word-spacing
     • z-index
2. How does a CSS animation differ from a CSS transition?
   • Animations come in when using more that one transition state, one to the other. Animations are used to facilitate multipule changes from one state to the other, known as key frames.

8 simple CSS3 transitions that will wow your users

1. What are some benefits to using CSS transitions on websites?
   • Excite your users, increase engagement and ultimately, when used well, increase your conversions.
2. How this topic fit in with your long-term goals?
   • I hope to create a fluid website that really smokes. I want it to be smooth as butter. I think when people are considering you for any role they like to see what it is that you can do and what you are about. Having a living website is a great way to say, “I love quality and I’m passionate about what I do.”.

Back to Top