gwenraq / css-animate

1 hour challenge - introduction to CSS keyframes with a stretch goal of JS Events

css-animate

Code challenge - introduction to CSS animations and tranform property

Desired Outcome

• Introduction to intermediate css concepts

Requirements

• Chrome, Sublime, Terminal

New Concepts

• CSS Animation
• CSS Transform

Your Challenge (5 points total)

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

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 and name a keyframe.
• Add css properties to 2-3 stages of animation
• Add the keyframe to the div with an id of 'animate'

Stretch Goal (3 Extra points)

Part One (1 point)

1. Create new HTML 5 elements for each new example
2. Create new CSS for each new element
3. Create a js folder and app.js file and link it to the project index.html

• Use a CSS pseudo class to trigger animation or transform
• Add a Javascript event to trigger animation or transform

Part Two (2 points)

1. Create a new git branch

• Enhance the first divs: rotate and skew
• Add Js events to the first divs: rotate, skew, all and animate

Reference Links

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