web-animation-19-20
Week 2
Inspiration
CSS Animation Rocks by @donovanh.
Table of Contents
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
- 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. What happens when people hover over certain elements with their mouse? What if they press keys on their keyboard?
- Can the user
:hoverover certain elements with their mouse? - What happens when the user tries to use a keyboard?
- Should something happen when you scroll the page?
- Do you need JavaScript to listen for events?
Extra resources
- CSS Tricks - Hey designers, if you only know one thing about JavaScript
- 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