animation
we will be learning and using a number of different animation techniques such as:
- transitions
- 2d transform
- 3d transform
- keyframe animation
- javascript animation (? or is that for all the above)
- SVG animation?
CSS3 animation :: transition
this is a brief review of CSS3 transitions you have probably done in web1
4.1 tutorial: CSS3 transitions
4.1 transitions demo
4.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
4.1 challenge exercise solution: CSS3 transitions
ex 4.2: 2d transform
use 2d transform to animate
CSS Tricks & Chris Coyier are excellent resources. Here is their transform reference
tutorial
4.2 2d transform demo
4.2 challenge exercise: 2d-transform
4.2 solution: 2d-transform
having trouble completing the challenge. Check out my solution.
ex 4.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.
3d transform tutorial
3d text animation from class demo
4.3 3d transform starter file
3d transform challenge
3d transform starter file
(double?) Bonus Challenge: you can do a box or carousel animation (or any other 3d animation you would like). These links may help:
ex 4.3 3d transform solution
Ideally, watch ths only when yo have tried the challenge
4.3 3d transform solution
ex4.4 @keyframe animation
Create a @keyframe animation in order to achieve multi-step, more complex movement.
starter file
..should you choose to accept it.
ideally for challenges, you use the techniques but then create something of your own.
solution fileex4.5 SVG animation
I feel like this is only 1/2 developed, but some good stuff if you have time.
Note that this is also an OPTIONAL exercise.
demo file from video