# web animation **Making things move on your page.** ## TRANSFORMS & TRANSITIONS Transform your content by moving, scaling, and rotating. Transitions allow those changes to happen over time. * [w3schools - css3 2d transforms](https://www.w3schools.com/css/css3_2dtransforms.asp "opens in new tab") * [w3schools - css 3d transforms](https://www.w3schools.com/css/css3_3dtransforms.asp "opens in new tab") * [w3schools - transitions](https://www.w3schools.com/css/css3_transitions.asp "opens in new tab") * [shay howe - transforms](http://learn.shayhowe.com/advanced-html-css/css-transforms/#transform-syntax "opens in new tab") * [thoughtbot - transitions and transforms](https://robots.thoughtbot.com/transitions-and-transforms "opens in new tab") * [css reference - transitions](https://cssreference.io/transitions/ "opens in new tab") * [easing generator](https://matthewlein.com/tools/ceaser "opens in new tab") ## CSS ANIMATION Program your content to move around and do interesting things. * [w3schools - css3 animation](https://www.w3schools.com/css/css3_animations.asp "opens in new tab") * [tutsplus intro to css3 animation](https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068 "opens in new tab") * [css animation for beginners](https://robots.thoughtbot.com/css-animation-for-beginners "opens in new tab") * [animation properties explanation from css-tricks](https://css-tricks.com/almanac/properties/a/animation/) * [css animation weekly newsletter](http://weekly.cssanimation.rocks/) ## TRANSFORM & ANIMATE LIBRARIES & TOOLS A few prebuilt tools to manipulate your content instead of starting from scratch. * [animate.css](https://daneden.github.io/animate.css/ "opens in new tab") * [hover.css](https://ianlunn.github.io/Hover/ "opens in new tab") * [obnoxious.css](http://tholman.com/obnoxious/ "opens in new tab") * [animista](http://animista.net/ "opens in new tab") * [magic animations](https://www.minimamente.com/example/magic_animations/ "opens in new tab") * [css animate.com](http://cssanimate.com/ "opens in new tab") * [css animation kit](http://angrytools.com/css/animation/ "opens in new tab") * [animation cheatsheet](http://www.justinaguilar.com/animations/index.html "opens in new tab") --- tags: #web #resources home: [[! intro to web resources]]