3.8 KiB
3.8 KiB
Awesome Motion Design
A list of links for using motion design on the Web
▐ A list of links created to help everyone with the interest to learn more about animation, physics apply in elements and graphic motion
Definitions
- The art of timing and spacing (https://www.youtube.com/watch?v=KRVhtMxQWRs)
CSS3
- @keyframes
- **Keyframes animation sintax - CSS Tricks** (https://css-tricks.com/snippets/css/keyframe-animation-syntax/)
- **Using Css Animations - MDN** (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
- transform
- **Property Transform Almanac - CSS Tricks** (https://css-tricks.com/almanac/properties/t/transform/)
- **CSS Transform - MDN** (https://developer.mozilla.org/en/docs/Web/CSS/transform)
- **Using CSS Transforms - MDN** (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
- Libraries for animation
- **Animate CSS** (https://daneden.github.io/animate.css/)
- **DynCSS** (http://www.vittoriozaccaria.net/dyn-css/)
- **SpinKit Simple CSS Spiners** (http://tobiasahlin.com/spinkit/)
- **Magic CSS3 Animation** (http://www.minimamente.com/example/magic_animations/)
- **Bounce Js** (http://bouncejs.com/)
- **Buttons UI** (http://unicorn-ui.com/buttons/)
- **Ani JS** (http://anijs.github.io/)
- **Single Element CSS Spinner** (http://projects.lukehaas.me/css-loaders/)
- **CSS Shake** (http://elrumordelaluz.github.io/csshake/#1)
- **Odometer** (http://github.hubspot.com/odometer/docs/welcome/)
- **Hover CSS** (http://ianlunn.github.io/Hover/)
- **Anima CSS** (http://lvivski.com/anima/)
- **AnimaTable** (http://leaverou.github.io/animatable/)
- **TriDiv** (http://tridiv.com/)
Blogs
- Motion Design Blog (http://www.motiondesign.com.br/blog/)
motiondesignweb Github: https://github.com/lucasmaiaesilva/awesome-motion-design-web
A list of links for using motion design on the Web
▐ A list of links created to help everyone with the interest to learn more about animation, physics apply in elements and graphic motion
Definitions
- The art of timing and spacing (https://www.youtube.com/watch?v=KRVhtMxQWRs)
CSS3
- @keyframes
- **Keyframes animation sintax - CSS Tricks** (https://css-tricks.com/snippets/css/keyframe-animation-syntax/)
- **Using Css Animations - MDN** (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
- transform
- **Property Transform Almanac - CSS Tricks** (https://css-tricks.com/almanac/properties/t/transform/)
- **CSS Transform - MDN** (https://developer.mozilla.org/en/docs/Web/CSS/transform)
- **Using CSS Transforms - MDN** (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
- Libraries for animation
- **Animate CSS** (https://daneden.github.io/animate.css/)
- **DynCSS** (http://www.vittoriozaccaria.net/dyn-css/)
- **SpinKit Simple CSS Spiners** (http://tobiasahlin.com/spinkit/)
- **Magic CSS3 Animation** (http://www.minimamente.com/example/magic_animations/)
- **Bounce Js** (http://bouncejs.com/)
- **Buttons UI** (http://unicorn-ui.com/buttons/)
- **Ani JS** (http://anijs.github.io/)
- **Single Element CSS Spinner** (http://projects.lukehaas.me/css-loaders/)
- **CSS Shake** (http://elrumordelaluz.github.io/csshake/#1)
- **Odometer** (http://github.hubspot.com/odometer/docs/welcome/)
- **Hover CSS** (http://ianlunn.github.io/Hover/)
- **Anima CSS** (http://lvivski.com/anima/)
- **AnimaTable** (http://leaverou.github.io/animatable/)
- **TriDiv** (http://tridiv.com/)
Blogs
- Motion Design Blog (http://www.motiondesign.com.br/blog/)
motiondesignweb Github: https://github.com/lucasmaiaesilva/awesome-motion-design-web