An Introduction to CSS animations and tranform property
- Expereince in intermediate css concepts
- CSS Animation
- CSS Transform
- CSS Keyframes
- CSS Pseudo Selectors
- Fork and Clone this repo
- Create an animation.css file inside your css folder
- Link your animate.css
- Apply a transform property to rotate the div with an id of 'rotate'
- Apply a transform property to skew the div with an id of 'skew'
- Apply multiple properties to the div with an id of 'all'
- Create new HTML element and use the transform property, `matrix`
- Create an input element and use the pseudo selector `:focus` on it
- Create and name a keyframe.
- Add css properties to 2-3 stages of the keyframe animation
- Add the keyframe to the div with an id of 'animate'
- Create 6 new HTML elements with 6 different `transform` properties
- Add a 5 stage keyframe animation
- Use the shorthand `animation` property to assign it an element
- Create a button with 5 different styles that change upon hover
- Create 3 new HTML elements with 3 different pseduo selectors on them
- Use a CSS pseudo class to trigger a keyframe animation or transform property on 3 different elements
- Make your hover transitions smooth (hint: `transition`)
- CSS Tricks - Keyframe Animation
- W3 Schools - CSS Animations