CSS Animations

[ivoputzer]

• basic transforms
• background animations
• gradient antimations

[ivoputzer]

• https://zellwk.com/blog/css-animations/
• https://blog.hubspot.com/website/css-animation
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
• http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/css/css3_animations.asp.html
• https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript

( < fundamentals, check this video tutorial https://www.simplilearn.com/tutorials/css-tutorial)

[aldomalerba]

• https://www.w3schools.com/css/css3_animations.asp
• https://web.dev/animations-guide/ (high performance)

[giuxtaposition]

• CSS3 Animation Cheat Sheet
• An Interactive Guide to Keyframe Animations
• Crazy animations

[AlexSemykin]

CSS Animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations CSS Tricks Animations: https://css-tricks.com/almanac/properties/a/animation/ 25 cool CSS animation examples to recreate: https://www.creativebloq.com/inspiration/css-animation-examples Exercises: CSS Transitions and Animations: https://codepen.io/jorgecardoso/post/1-css-transitions-and-animations CSS3 Animation Exercise: https://www.ankitweblogic.com/css3/animation-exercise.php

[ivoputzer]

https://animate.style/

• Rimando a codepen weekly challenges

[ivoputzer]

let's find some excercizes

• [ ] parallax
• [ ] scroll based animations (fadein/out/expand)
• [ ] appear/disappear/expand for modale/menu/etc
• [ ] accordion (summary/details)
• [ ] nice background animation (ie. gradients and/or clouds.. that later can be taken up by javascript/webGL)