css-animations-and-transitions.md

CSS Animations and Transitions

The topic of the first Muze Developer Day is: CSS Animations and Transitions!

The program

• 10.00-10.15 Opening
• 10.15-10.45 Watch Web Animations APIs by Rachel Nabors
• 10:45- 11:15 Watch CSS Animation - Beyond Transitions by Steven Roberts
• 11.15-11.30 Short break
• 11.30-12.30 Discuss, Gather other resources, First round of fun developing
• 12.30-13.30 Break for Lunch
• 13.30-16.00 Second round of fun developing
• 16.00-17.00 Demonstrate work, Closing

Resources from the talks

• Web Designer magazine with CSS animations
• will-change CSS attribute
• Web Developer Tools in the browser:
  • Chrome
  • Firefox
• MDN pages:
  • Animations
    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
    • https://developer.mozilla.org/en-US/docs/Web/CSS/animation
    • https://developer.mozilla.org/en-US/docs/Web/API/animation
  • Transitions
    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
    • https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• The Comics Book Series
  • Understanding Comics: The Invisible Art
  • Reinventing Comics
  • Making Comics: Storytelling Secrets of Comics, Manga, and Graphic Novels

Further (Re)sources

An Interactive Guide to CSS Transitions by Josh Comeau

Videos

• Getting creative with keyframes by Amit Sheen

• Animating the User Experience by Rachel Nabors

• Animation & perceived performance by Tobias Ahlin

• Choose Your Animation Adventure by Val Head

• Animating with CSS Transitions - A look at the transition properties

• Animating with CSS Transitions - Using transitions in action

• CSS Transition (CSS Animations Series Part 1)

• CSS Animation & Keyframes (CSS Animations Series Part 2)