Skip to content

Commit 19a802b

Browse files
S3-333S3-333
committed
License update css
1 parent 3f8ab23 commit 19a802b

8 files changed

Lines changed: 1889 additions & 1153 deletions

File tree

‎animate.compat.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Version - 4.1.1
66
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
77
*
8-
* Copyright (c) 2022 Animate.css
8+
* Copyright (c) 2026 Animate.css
99
*/
1010
:root {
1111
--animate-duration: 1s;

‎animate.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,57 @@
2626
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
2727
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
2828

29-
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
29+
<link rel="preconnect" href="https://fonts.googleapis.com">
30+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3031
<link
3132
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap"
3233
rel="stylesheet"
34+
media="print"
35+
onload="this.media='all'"
3336
/>
37+
<noscript>
38+
<link
39+
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap"
40+
rel="stylesheet"
41+
/>
42+
</noscript>
43+
3444
<link
3545
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css"
3646
rel="stylesheet"
47+
media="print"
48+
onload="this.media='all'"
3749
/>
50+
<noscript>
51+
<link
52+
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css"
53+
rel="stylesheet"
54+
/>
55+
</noscript>
3856

3957
<!-- Fork Corner Stylesheet -->
4058
<link
4159
href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css"
4260
rel="stylesheet"
61+
media="print"
62+
onload="this.media='all'"
4363
/>
64+
<noscript>
65+
<link
66+
href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css"
67+
rel="stylesheet"
68+
/>
69+
</noscript>
70+
71+
<link rel="stylesheet" href="animate.min.css" media="print" onload="this.media='all'" />
72+
<noscript><link rel="stylesheet" href="animate.min.css" /></noscript>
4473

45-
<link rel="stylesheet" href="animate.min.css" />
4674
<link rel="stylesheet" href="style.css" />
4775
</head>
4876
<body>
4977

5078
<!-- Fork Corner -->
51-
<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>
79+
<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" aria-label="View source on GitHub"></a>
5280

5381
<article class="intro">
5482
<section class="callout">
@@ -1099,9 +1127,9 @@ <h3>Don't animate root elements</h3>
10991127
<h3>Infinite animations should be avoided</h3>
11001128
<p>Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!</p>
11011129
<h3>Mind the initial and final state of your elements</h3>
1102-
<p>All the Animate.css animations include a CSS property called <code>animation-fill-mode</code>, which controls the states of an element before and after animation. You can read more about it <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode">here</a>. Animate.css defaults to <code>animation-fill-mode: both</code>, but you can change it to suit your needs.</p>
1130+
<p>All the Animate.css animations include a CSS property called <code>animation-fill-mode</code>, which controls the states of an element before and after animation. You can read more about it <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode">on MDN's documentation</a>. Animate.css defaults to <code>animation-fill-mode: both</code>, but you can change it to suit your needs.</p>
11031131
<h3>Don't disable the <code>prefers-reduced-motion</code> media query</h3>
1104-
<p>Since version 3.7.0 Animate.css supports the <code>prefers-reduced-motion</code> media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a <strong>critical accessibility feature</strong> and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it <a href="https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/">here</a>. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:</p>
1132+
<p>Since version 3.7.0 Animate.css supports the <code>prefers-reduced-motion</code> media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a <strong>critical accessibility feature</strong> and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it <a href="https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/">on CSS-Tricks</a>. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:</p>
11051133
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="eltonmesquita" data-slug-hash="oNjGGbw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Prefers-reduce-motion media query">
11061134
<span>See the Pen <a href="https://codepen.io/eltonmesquita/pen/oNjGGbw">
11071135
Prefers-reduce-motion media query</a> by Elton Mesquita (<a href="https://codepen.io/eltonmesquita">@eltonmesquita</a>)
@@ -1264,9 +1292,9 @@ <h2>Core Team</h2>
12641292
<table>
12651293
<thead>
12661294
<tr>
1267-
<th><img src="https://avatars2.githubusercontent.com/u/439365?s=460&amp;u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&amp;v=4" alt=""></th>
1268-
<th><img src="https://avatars2.githubusercontent.com/u/5007208?s=460&amp;u=418401ee605824272e5dcb955fd64ea24546a857&amp;v=4" alt=""></th>
1269-
<th><img src="https://avatars1.githubusercontent.com/u/15052701?s=460&amp;u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&amp;v=4" alt=""></th>
1295+
<th><img src="https://avatars2.githubusercontent.com/u/439365?s=460&amp;u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&amp;v=4" alt="" width="150" height="150"></th>
1296+
<th><img src="https://avatars2.githubusercontent.com/u/5007208?s=460&amp;u=418401ee605824272e5dcb955fd64ea24546a857&amp;v=4" alt="" width="150" height="150"></th>
1297+
<th><img src="https://avatars1.githubusercontent.com/u/15052701?s=460&amp;u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&amp;v=4" alt="" width="150" height="150"></th>
12701298
</tr>
12711299
</thead>
12721300
<tbody>
@@ -1301,7 +1329,7 @@ <h3>Code of Conduct</h3>
13011329
</div>
13021330
<aside class="sidebar">
13031331
<div class="meta">
1304-
<a href="https://github.com/animate-css/animate.css" target="_blank" class="icon-github">
1332+
<a href="https://github.com/animate-css/animate.css" target="_blank" class="icon-github" aria-label="View source on GitHub">
13051333
<svg
13061334
xmlns="http://www.w3.org/2000/svg"
13071335
fill="none"
@@ -1348,7 +1376,7 @@ <h3>Code of Conduct</h3>
13481376
rel="noopener noreferrer"
13491377
href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
13501378
>
1351-
here</a
1379+
on Google Developers</a
13521380
>.
13531381
</p>
13541382
</aside>

‎docs/serve.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"headers": [
3+
{
4+
"source": "**/*.@(css|mjs|js|ico|jpg|png|svg)",
5+
"headers": [
6+
{
7+
"key": "Cache-Control",
8+
"value": "public, max-age=31536000, immutable"
9+
}
10+
]
11+
}
12+
]
13+
}

‎docs/style.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
--c-dark: #333;
99
--c-background: #fce5cd;
1010
--c-background-dark: #f7d7b5;
11+
--c-secondary-dark: #a85d00;
1112
}
1213

1314
html,
@@ -225,7 +226,7 @@ blockquote {
225226

226227
animation-delay: 0.3s;
227228

228-
color: var(--c-secondary);
229+
color: var(--c-secondary-dark);
229230
font-size: 1.3333rem;
230231
font-size: min(10vw, 1.3333rem);
231232
}

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"devDependencies": {
4545
"autoprefixer": "^10.4.7",
4646
"cssnano": "^5.0.17",
47-
"eslint": "^7.32.0",
47+
"eslint": "^4.1.1",
4848
"husky": "^7.0.4",
4949
"lint-staged": "^11.2.6",
5050
"markdown-it": "^12.3.2",
@@ -53,8 +53,8 @@
5353
"postcss-cli": "^8.3.1",
5454
"postcss-header": "^3.0.1",
5555
"postcss-import": "^14.0.2",
56-
"postcss-prefixer": "^2.1.3",
57-
"postcss-preset-env": "^6.7.0",
56+
"postcss-prefixer": "^3.0.0",
57+
"postcss-preset-env": "^11.1.3",
5858
"prettier": "^2.7.1"
5959
},
6060
"lint-staged": {
@@ -65,5 +65,8 @@
6565
"animate.min.css",
6666
"animate.css",
6767
"source/**/*.css"
68-
]
68+
],
69+
"dependencies": {
70+
"animate.css": "^4.1.1"
71+
}
6972
}

0 commit comments

Comments
 (0)