zakattack9 / everything-animate

Intro to CSS animation concepts including, transform, keyframes, and pseudo selectors

Everything Animate

An Introduction to CSS animations and tranform property

Desired Outcome

• Expereince in intermediate css concepts

New Concepts

• CSS Animation
• CSS Transform
• CSS Keyframes
• CSS Pseudo Selectors

Initial Setup

1. Fork and Clone this repo
2. Create an animation.css file inside your css folder
3. Link your animate.css

*DO NOT TOUCH OR EDIT THE STYLES.CSS FILE

CSS Tasks

• 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'

Stretch Goals (3 Extra points)

1. Create 6 new HTML elements with 6 different `transform` properties
2. Add a 5 stage keyframe animation
3. Use the shorthand `animation` property to assign it an element
4. Create a button with 5 different styles that change upon hover
5. Create 3 new HTML elements with 3 different pseduo selectors on them
6. Use a CSS pseudo class to trigger a keyframe animation or transform property on 3 different elements
7. Make your hover transitions smooth (hint: `transition`)

Reference Links

• CSS Tricks - Keyframe Animation
• W3 Schools - CSS Animations