# 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 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") ## web animation tools & systems - [phase](https://www.phase.com) is a free online tool to build keyframe web animations using SVG, Lottie, and image files. Can export to MP4 or integrate with Figma. - [cavalry](https://cavalry.scenegroup.co/) is a 2D animation tool that can output to web formats. there is a limited free option to get started. - [anime.js](https://animejs.com) is the gold-standard system for building web animations. This free tool uses JavaScript and can be quite difficult to learn. Final output can be quite impressive though. - [GSAP](https://gsap.com) is another amazing free JavaScript library for building amazing web animations. Again, quite complex and potentially difficult to learn. - [Lottie](https://lottiefiles.com/what-is-lottie)is a web-file format using [JSON](https://www.json.org/json-en.html) that allows you to render AfterEffects animations as web animations. There are several web apps that let you process and modify the Lottie animations, although most can be expensive to use. [LottieFiles](https://lottiefiles.com)is a good starting place. --- tags: #web #resources home: [[! intro to web resources]]