web-animation-18-19
Week 2
Table of Contents
Inspiration
CSS Animation Rocks by @donovanh.
Lecture
Slides
Theory
- CSSanimation.rocks - Why animate?
- 12 principles of animation by Alan Becker.
- Principles of User Interface Design by Joshua Porter,
Lab
Transitions in Space
Add interactivity based on user input
Synopsis
- Time: 16:00h
- Goals: subgoal 5, subgoal 6, subgoal 7 & subgoal 8
- Due: before lecture 3
Description
Your artwork should respond to input from the user. Use transitions, animation, pseudo-classes and events to make your artwork interactive.
- Can the user
:hoverover certain elements with their mouse? - What happens when the user tries to use a keyboard?
- Can the user click on elements?
- Do you need JavaScript to listen for events?
Extra resources
- CSSanimation.rocks - Transitions vs Animations
- CSSanimation.rocks - Animation principles for the web
- CSSanimation.rocks - Animating pseudo-elements
- Shay Howe - Transitions & Animations
- Shay Howe - Complex Selectors