![CSS Animations and Transitions](css-animations-and-transitions.png)

# 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](https://www.youtube.com/watch?v=AGiTmjFHs8M) by Rachel Nabors
- 10:45- 11:15 Watch [CSS Animation - Beyond Transitions](https://www.youtube.com/watch?v=TYlA-eolzLs) 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]( https://online.pubhtml5.com/zhka/jmkv/)
- [`will-change` CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)
- Web Developer Tools in the browser:
    - [Chrome](https://developer.chrome.com/docs/devtools/css/animations/)
    - [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/work_with_animations/)
- 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](https://archive.org/details/understanding-comics)
    - [Reinventing Comics]( https://en.wikipedia.org/wiki/Reinventing_Comics)
    - [Making Comics: Storytelling Secrets of Comics, Manga, and Graphic Novels](https://en.wikipedia.org/wiki/Making_Comics)

## Further (Re)sources

[An Interactive Guide to CSS Transitions](https://www.joshwcomeau.com/animation/css-transitions/) by Josh Comeau

### Videos

- [Getting creative with keyframes ](https://www.youtube.com/watch?v=_Vrbb5BvD2Q) by Amit Sheen
- [Animating the User Experience](https://vimeo.com/134283075?embedded=true&source=vimeo_logo&owner=5259632) by Rachel Nabors
- [Animation & perceived performance](https://vimeo.com/163185189) by Tobias Ahlin
- [ Choose Your Animation Adventure](https://www.youtube.com/watch?v=t6gJG_UehZ4) by Val Head 

- [Animating with CSS Transitions - A look at the transition properties](https://www.youtube.com/watch?v=Nloq6uzF8RQ)
- [Animating with CSS Transitions - Using transitions in action](https://www.youtube.com/watch?v=YYlFFMc0RAg)
- [CSS Transition (CSS Animations Series Part 1)](https://www.youtube.com/watch?v=8kK-cA99SA0)
- [CSS Animation & Keyframes (CSS Animations Series Part 2)](https://www.youtube.com/watch?v=f1WMjDx4snI)