Feb 17

Project 2: Interactive Storytelling

Look at refinements to your design comps and mobile translation

---

CSS Animation & Transitions

Animation

CSS Animation Lecture

• W3Schools CSS Animation
• CSS3=Awesome Animation
• CSS-Tricks Animation
• Basic Use
• Animation for Beginners

Transitions

CSS Transitions Lecture

• W3Schools CSS Transitions
• Trying CSS3 Transitions
• CSS3=Awesome Transitions
• CSS Tricks Transition
• Transitions and Transforms for Beginners

Exercise 6: CSS 3 Transitions and Animations

In Class Demo and Files

---

Additional Resources

Cool CSS Stuff

Spreadsheet of Advanced CSS

Animated GIF HELP

• Animated GIF Help (Photoshop)
• Frames from Layers Method (Photoshop)
• Procreate 5 Animation Assist

---

Due Next Class

Project 2: Interactive Storytelling

• Finalize/refine design further for mobile and desktop – get it locked in. (we will be starting to code our sites next week)
• Brainstorm how you might want to integrate your required CSS Animation or Transition.

Exercise 6: CSS Animations and Transitions