guide/index.html at gh-pages · waapi/guide · GitHub

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, width=device-width">
	<title>Web Animations API Guide</title>

	<!-- Stylesheets -->
	<style>
		/* Fonts */
		@font-face { font-family: Inconsolata; src: url(/assets/fonts/Inconsolata-Regular.ttf); }
		@font-face { font-family: Inconsolata; font-weight: bold; src: url(/assets/fonts/Inconsolata-Bold.ttf); }
		@font-face { font-family: Lato; font-weight: 100; font-style: normal; src: url(/assets/fonts/LatoLatinHair-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 100; font-style: italic; src: url(/assets/fonts/LatoLatinHair-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 200; font-style: normal; src: url(/assets/fonts/LatoLatinThin-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 200; font-style: italic; src: url(/assets/fonts/LatoLatinThin-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 300; font-style: normal; src: url(/assets/fonts/LatoLatinLight-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 300; font-style: italic; src: url(/assets/fonts/LatoLatinLight-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 400; font-style: normal; src: url(/assets/fonts/LatoLatin-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 400; font-style: italic; src: url(/assets/fonts/LatoLatin-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 500; font-style: normal; src: url(/assets/fonts/LatoLatinMed-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 500; font-style: italic; src: url(/assets/fonts/LatoLatinMed-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 600; font-style: normal; src: url(/assets/fonts/LatoLatinSemBd-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 600; font-style: italic; src: url(/assets/fonts/LatoLatinSemBd-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 700; font-style: normal; src: url(/assets/fonts/LatoLatin-Bold.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 700; font-style: italic; src: url(/assets/fonts/LatoLatin-BoldItalic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 800; font-style: normal; src: url(/assets/fonts/LatoLatinExtBd-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 800; font-style: italic; src: url(/assets/fonts/LatoLatinExtBd-Italic.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 900; font-style: normal; src: url(/assets/fonts/LatoLatinBlack-Regular.woff) format('woff'); }
		@font-face { font-family: Lato; font-weight: 900; font-style: italic; src: url(/assets/fonts/LatoLatinBlack-Italic.woff) format('woff'); }
	</style>
	<link rel="stylesheet" href="/css/unstyle.css">
	<link rel="stylesheet" href="/css/guide.css">

	<!-- Scripts -->
<!-- 	<script src="/js/nothing.js?"></script> -->


<body>
	<!-- Markup -->
	<nav class="global tall">
		<header>
			<h1><a href="/">Web Animations API Guide</a></h1>
			<p>
				This is an informal guide on the API of the Web Animations spec.
			</p>
		</header>
		<div class="column"><h2>Core</h2>
			<ul>
				<li><a href="/core/animation/">
						<svg class="icon" viewBox="0 0 24 24">
							<rect height="2" width="12" x="4" y="10"/>
							<rect height="2" width="12" x="4" y="6"/>
							<rect height="2" width="8" x="4" y="14"/>
							<polygon points="14,14 14,20 19,17"/>
						</svg>
						Animation
					</a>
					<p>The video player equivalent for web animations</p>

				<li><a href="/core/timeline/">
						<svg class="icon" viewBox="0 0 24 24">
							<path d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z"/>
						</svg>
						Timeline
					</a>
					<p>Supplies animations with time values</p>

			</ul>
		</div>
		<div class="column"><h2>Effects</h2>
			<ul>
				<li><a href="/effects/keyframe/">
						<svg class="icon" viewBox="0 0 24 24">
							<path d="M19.5 9.5c-1.03 0-1.9.62-2.29 1.5h-2.92c-.39-.88-1.26-1.5-2.29-1.5s-1.9.62-2.29 1.5H6.79c-.39-.88-1.26-1.5-2.29-1.5C3.12 9.5 2 10.62 2 12s1.12 2.5 2.5 2.5c1.03 0 1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5s1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5 1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5z"/>
						</svg>
						KeyframeEffect
					</a>
					<p>Animates an element using an array of frames</p>

				<li><a href="/effects/group/">
						<svg class="icon" viewBox="0 0 24 24">
							<path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
						</svg>
						GroupEffect
					</a>
					<p>Groups multiple effects in parallel</p>

				<li><a href="/effects/sequence/">
						<svg class="icon" viewBox="0 0 24 24">
							<path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
						</svg>
						SequenceEffect
					</a>
					<p>Groups multiple effects in a linear sequence</p>

			</ul>
		</div>
		<div class="column"><h2>Extensions</h2>
			<ul>
				<li><a disabled-href="/extensions/document/timeline/">
						<svg class="icon" viewBox="0 0 24 24">
							<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
							<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
						</svg>
						document.timeline
					</a>
					<p>Default timeline that supplies time values from the global clock</p>

				<li><a disabled-href="/extensions/document/getAnimations/">
						document.getAnimations
					</a>
					<p>Lists all the active animations in the document</p>

				<li><a disabled-href="/extensions/element/animate/">
						<svg class="icon" viewBox="0 0 24 24">
							<path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"/>
						</svg>
						element.animate
					</a>
					<p>Handy little method available in DOM elements that wraps a single KeyframeEffect with an Animation</p>

				<li><a disabled-href="/extensions/element/getAnimations/">
						element.getAnimations
					</a>
					<p>Lists all the active animations that target the element</p>

			</ul>
		</div>
	</nav>