-
Notifications
You must be signed in to change notification settings - Fork 16.2k
/
template.html
177 lines (162 loc) 路 9.23 KB
/
template.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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Primary Meta Tags -->
<title>Animate.css | A cross-browser library of CSS animations.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Animate.css | A cross-browser library of CSS animations.">
<meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://animate.style">
<meta property="og:title" content="Animate.css | A cross-browser library of CSS animations.">
<meta property="og:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
<meta property="og:image" content="https://animate.style/img/animatecss-opengraph.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://animate.style">
<meta property="twitter:title" content="Animate.css | A cross-browser library of CSS animations.">
<meta property="twitter:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
<meta property="twitter:image" content="https://animate.style/img/animatecss-opengraph.jpg">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css"
rel="stylesheet"
/>
<!-- Fork Corner Stylesheet -->
<link
href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="animate.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Fork Corner -->
<a href="https://github.com/animate-css/animate.css" target="_blank" id="fork-corner" class="fork-corner fc-size-small fc-pos-tl fc-animate-grow fc-theme-github"></a>
<article class="intro">
<section class="callout">
<h1 class="callout-title">Animate.css</h1>
<h2 class="callout-subtitle">Just-add-water CSS animations</h2>
<p class="callout-showList">
<button class="button button-animations">See animations</button>
</p>
</section>
<section class="animation-list">
<label for="night-light-checkbox" class="night-light-label">
<input type="checkbox" id="night-light-checkbox" />
<span class="night-light-ball"></span>
<svg viewBox="0 0 512 512" class="sun-svg">
<path id="sun-svg"
d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z">
</path>
</svg>
<svg viewBox="0 0 512 512" class="moon-svg">
<path id="moon-svg"
d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z">
</path>
</svg>
</label>
<button class="callout-hideList button">Close list</button>
{{list}}
</section>
<footer class="intro-footer">
<p>
Another thing from
<a href="https://daneden.me" target="_blank" title="Daniel Eden">Daniel Eden</a> and
<a href="#contributors" title="Contributors">friends</a>
</p>
</footer>
</article>
<main>
<header class="docs-header">
<div class="container">
<h2 class="docs-mainTitle">
<a href="#documentation" title="Documentation">Documentation</a>
</h2>
</div>
</header>
<article class="docs" id="documentation">
<span class="hamburger">
<svg
width="23"
height="15"
viewBox="0 0 23 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line y1="1.5" x2="23" y2="1.5" stroke="#351C75" stroke-width="3" />
<line y1="7.5" x2="23" y2="7.5" stroke="#351C75" stroke-width="3" />
<line y1="13.5" x2="23" y2="13.5" stroke="#351C75" stroke-width="3" />
</svg>
</span>
<div class="container">
<div class="content">
{{docs}}
</div>
<aside class="sidebar">
<div class="meta">
<a href="https://github.com/animate-css/animate.css" target="_blank" class="icon-github">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
width="18"
height="18"
>
<path
fill="#000000"
d="M16.793 4.703a8.96 8.96 0 00-3.276-3.276A8.803 8.803 0 009 .22a8.804 8.804 0 00-4.518 1.207 8.96 8.96 0 00-3.275 3.276A8.803 8.803 0 000 9.22c0 1.96.572 3.724 1.717 5.29 1.144 1.567 2.623 2.651 4.435 3.252.211.04.367.012.469-.081a.458.458 0 00.152-.352l-.006-.633c-.004-.398-.006-.746-.006-1.042l-.27.046a3.434 3.434 0 01-.65.041 4.958 4.958 0 01-.814-.082 1.82 1.82 0 01-.785-.351 1.487 1.487 0 01-.516-.72l-.117-.27a2.93 2.93 0 00-.369-.598c-.168-.219-.338-.367-.51-.445l-.082-.059a.865.865 0 01-.152-.14.643.643 0 01-.105-.165c-.024-.054-.004-.1.058-.135.063-.035.176-.052.34-.052l.234.035c.157.031.35.125.58.281.23.156.42.36.569.61.18.32.396.564.65.732.254.168.51.252.768.252.257 0 .48-.02.667-.059a2.33 2.33 0 00.528-.175c.07-.524.262-.927.574-1.208a8.026 8.026 0 01-1.201-.21 4.779 4.779 0 01-1.102-.458 3.153 3.153 0 01-.943-.785c-.25-.312-.455-.723-.615-1.23-.16-.508-.24-1.094-.24-1.758 0-.946.308-1.75.925-2.414-.289-.711-.261-1.508.082-2.39.227-.071.563-.018 1.008.157.446.176.772.327.979.452.207.125.373.23.498.316A8.32 8.32 0 019 4.568c.773 0 1.523.101 2.25.304l.445-.281c.305-.188.664-.36 1.078-.516.414-.156.73-.199.95-.129.351.883.382 1.68.093 2.39.617.665.926 1.47.926 2.415 0 .664-.08 1.252-.24 1.764-.16.511-.367.921-.62 1.23-.255.309-.572.569-.95.78-.38.21-.747.362-1.102.456a8.013 8.013 0 01-1.201.212c.406.351.61.906.61 1.664v2.472c0 .14.048.258.146.351.097.094.252.121.463.082 1.812-.601 3.29-1.685 4.435-3.252C17.427 12.944 18 11.18 18 9.22a8.81 8.81 0 00-1.207-4.517z"
/>
</svg>
</a>
<span class="animate-version">v{{version}}</span>
</div>
</aside>
</div>
</article>
</main>
<footer class="main-footer">
<p>
Animate.css is a Hippocratic-2.1 licensed library.
You can use it freely, respecting the terms included in the <a href="https://github.com/animate-css/animate.css/blob/main/LICENSE" title="license">license file.</a>
</p>
</footer>
<aside class="motionless__banner">
<p class="motionless__paragraph">
<b>Hey!</b> It seems that you have animations disabled on your OS, turning Animate.css
off.<br />
Animate.css supports the
<a
title="prefers-reduced-motion CSS media feature on MDN"
target="_blank"
rel="noopener noreferrer"
href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"
>
prefers-reduced-motion CSS media feature</a
>. You can read more about it
<a
title="Move Ya! Or maybe, don't, if the user prefers-reduced-motion! on Google Developers"
target="_blank"
rel="noopener noreferrer"
href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
>
here</a
>.
</p>
</aside>
<script type="module" src="main.mjs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- Fork Corner Scripts -->
<script src="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.js" defer></script>
</body>
</html>