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