learn to learn with these helpful resources. Become a web designer.

• CSS Tricks: animation
• article: Web Animation Techniques
• Kevin Powell: CSS Evangelist and you here is his YouTube channel
• Design Course with UI/UX guru Gary Simon

inspiration

check out these examples for inspiration

• Superlist
• Plenty Products
• Welch's
• Field Edge
• Digital Silk's recommendations

CSS3 animation :: transition

this is a brief review of CSS3 transitions you have probably done in web1

2.1 transitions starter

target: TBD

2.1 tutorial: CSS3 transitions

2.1 challenge exercise: CSS3 transitions

Your challenge exercise should include:

• your CSS3 image swapping demo
• your name
• link back to your web2/ homepage
• basic html elements such as header, nav, main, section & footer

2.1 challenge exercise solution: CSS3 transitions

2.1 transition challenge possible solution

ex 2.2: 2d transform

use 2d transform to animate

CSS Tricks & Chris Coyier are excellent resources. Here is their transform reference

target: TBD

tutorial

2.2 challenge exercise: 2d-transform

2.2 solution: 2d-transform

having trouble completing the challenge. Check out my solution.

2.2 2d transform possible solution

ex 2.3 3d transform & keyframe animation

For this exercise we will combind 3d transform with keyframe animation.

The 3 dimensions are X (horizontal plane), Y (vertical) and Z depth.

target: TBD

3d transform tutorial

3d transform challenge

ex 2.3 3d transform solution

Ideally, watch ths only when yo have tried the challenge

due: TBD

ex2.4 @keyframe animation

Create a @keyframe animation in order to achieve multi-step, more complex movement.

target: TBD

ex2.5 SVG animation

I feel like this is only 1/2 developed, but some good stuff if you have time.