CSS Transforms, Transitions, and Animations

Notes from Transforms

The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.

2D Transforms

2D transforms work on the x and y axes, known as horizontal and vertical axes

• rotate value: rotates an element from 0 to 360 degrees
• scale value: allows you to change the size of an element
• translate value: pushing and pulling of an element in different directions
• translateX value: changes position on the horizontal axis
• translateY value: changes position on the vertical axis
• skew value: distorts elements
• skewX value: distorts element on the horizontal axis
• skewY value: distorts element on the vertical axis

3D Transforms

3D transforms work on the x, y, and z axes

Notes from Transitions & Animations

Transitions

For a transition to take place, an element must have a change in state, and different styles must be identified for each state. There are 4 transition related properties

1. transition-property: determines exactly what properties will be altered in conjunction with the other transitional properties
2. transition-duration: set using general timing values like seconds and milliseconds
3. transition-timing-function: used to set the speed in which a transition will move
4. transition-delay: sets a time value that determines how long a transition should be stalled before executing

Notes from 8 Simple CSS Transitions That Will Wow Your Users by Sara Vieira

1. Fade in
2. Change Color
3. Grow & Shrink
4. Rotate elements
5. Square to circle
6. 3D Shadow
7. Swing (this annimation moves the element left and right)
8. Insert border