This repository was archived by the owner on Jan 18, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathgallery.html
48 lines (47 loc) · 2.92 KB
/
gallery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
<head>
<title>Web Animations examples</title>
<meta charset="utf-8">
<link rel="stylesheet" href="tabzilla.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<main class="constrained">
<h1>Web animations examples</h1>
<p>Here's a collection of examples using the
<a href="https://developer.mozilla.org/en/docs/Web/API/Animation" target="_blank">Web Animations API</a>. This API allows you to create high-performance animations, and also inspect and manipulate them, as well as those created by CSS that are currently running.
</p>
<aside class="no-support" style="display:none">
<h2>Your browser does <em>not</em> support Web Animations!</h2>
<p>The demos on this site require Web Animations support to work properly. You can download the <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">latest version of Firefox</a> (>= 48) to try these demos or check out the <a href="http://caniuse.com/#feat=web-animation" target="_blank">browser compatibility table</a>.
</aside>
<h2>Index</h2>
<nav><dl>
<dt><a href="demos/style-guide.html">Style guide</a></dt>
<dd>You can give designers the power to fully customise the animations of UX components right in the style guide itself!</dd>
<dt><a href="demos/accessibility.html">Adjustable accessibility settings</a></dt>
<dd>Use the Web Animations API so users can customise animations according to their needs or preferences.<dd>
<dt><a href="demos/js-animations-vs-web-animations.html">Performance comparison</a></dt>
<dd>Comparing the performance of JavaScript animations via <code>requestAnimationFrame</code> versus the new Web Animations API.</dd>
<dt><a href="demos/css-vs-animations-code.html">Source code comparison</a></dt>
<dd>Comparing the code of CSS-defined animations versus the Web Animations API.</dd>
</dl></nav>
<h2>Resources</h2>
<nav><ul>
<li><a href="https://developer.mozilla.org/en/docs/Web/API/Animation" target="_blank">Web Animations at the MDN</a> (API reference) and
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API" target="_blank">tutorial</a>.</li>
<li><a href="http://web-animations.github.io/web-animations-demos/" target="_blank">Web animation demos</a> (more animation examples)</li>
<li><a href="http://codepen.io/collection/bpEza/" target="_blank"><i>"Alice in Web Animation Land"</i></a> demos</li>
</ul></nav>
</main>
<script>
window.onload = function () {
// show no browser support banner if needed
if (window.Element.prototype.animate === undefined) {
document.querySelector('.no-support').style.display = 'block';
}
}
</script>
</body>
</html>