Lecture 23: CSS Transitions, Transform, Animation

To-do for today’s class

• Download starter file
• Some fun animations:
  • https://codepen.io/matchboxhero/pen/EwdmmP?editors=1100
  • https://codepen.io/benstanley/pen/icqok
  • https://codepen.io/nxworld/pen/ZYNOBZ
  • https://tympanus.net/Tutorials/OriginalHoverEffects/index.html

Slides

Link to download PDF version.

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Completed files

• 12pm: https://github.com/nayeonk/itp303-spring-2022-12pm/tree/master/lect23-css-transitions/
• 4pm: https://github.com/nayeonk/itp303-spring-2022-4pm/tree/master/lect23-css-transitions/