reading-notes

CSS Animations and Transitions

CSS Transforms

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

Using transform in CSS allows a lot of really cool functionality with CSS. It allows you to alter the size, rotation, position or adjust things in a 2d or 3d way. This really allows a lot of cool animations to be integrated with websites and can make them really pop.

  1. Provide an example of a transform and how you could see that being used on a website. CSS Transitions & Animations

For transforming elements the 2d elements that can be used are things like rotate, which allow you to either shift an objects standard rotation or even in a 3d sense rotate that object. There is also scale which allows you to enlarge or shrink an object. If you translate an object you move it’s position around on the screen in either the x or y axis. You can also do things like Skew items to adjust the distance between corners to make these objects look like they are slanted.

CSS Transitions and Animations

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

CSS Transition allows the developer to have an element change from one static state to another over a course of time. So instead of a button color just changing from green to red it will slowly change if you set the transition time to something like 5s. Which means it will take 5 seconds for the computer to change that button from green to red.

  1. How does a CSS animation differ from a CSS transition?

Animations are more complex than transitions are. Where transitions can only shift between two states animations allow for a lot of transitions and complex interactions.. Think abut an animation of a ball bouncing across the screen, it would take too many transitions that would need to be linked, and thats exactly what animations do.

8 simple CSS3 transitions that will wow your users

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

Some benefits to using CSS transitions is that they are already integrated using a browser and are hardware accelerated. This means that you can build wow worthy visuals just using css and without having to code a thousand lines to get it to work the way you want.

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

CSS transitions and animations are used in practically every website and really can help emphasize certain parts of your website. Think about a button that fades out and slides away when clicked before taking you to the page, looks pretty cool and will make you more engaged with that website. I see this being a huge part of my future and my ability to make beautiful websites.

This site is open source. Improve this page.