Skip to content

Commit f859341

Browse files
friunsfriuns
committed
Merge PR animate-css#1906: Fix lighthouse (SEO, Accessibility, Performance) (conflicts resolved: prefer PR changes)
2 parents 054b8fc + 19a802b commit f859341

8 files changed

Lines changed: 1538 additions & 895 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 & 27 deletions
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) 2025 Animate.css
8+
* Copyright (c) 2026 Animate.css
99
*/
1010
:root {
1111
--animate-duration: 1s;
@@ -4072,29 +4072,3 @@
40724072
-webkit-animation-name: slideOutUp;
40734073
animation-name: slideOutUp;
40744074
}
4075-
@keyframes WarningFlash {
4076-
0% {
4077-
text-shadow:
4078-
0 0 10px rgba(255, 200, 0, 0.3),
4079-
0 0 20px rgba(255, 200, 0, 0.2),
4080-
0 0 30px rgba(255, 200, 0, 0.1);
4081-
}
4082-
4083-
50% {
4084-
text-shadow:
4085-
0 0 20px #fff700,
4086-
0 0 40px #ffe347,
4087-
0 0 60px #ffcc00;
4088-
}
4089-
4090-
100% {
4091-
text-shadow:
4092-
0 0 10px rgba(255, 200, 0, 0.3),
4093-
0 0 20px rgba(255, 200, 0, 0.2),
4094-
0 0 30px rgba(255, 200, 0, 0.1);
4095-
}
4096-
}
4097-
.animate__WarningFlash{
4098-
-webkit-animation-name:WarningFlash ;
4099-
animation-name:WarningFlash;
4100-
}

‎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,23 +26,51 @@
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
<style>
4876
/* 1. Wrapper for positioning */
@@ -99,7 +127,7 @@
99127
<body>
100128

101129
<!-- Fork Corner -->
102-
<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>
130+
<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>
103131

104132
<article class="intro">
105133
<section class="callout">
@@ -1150,9 +1178,9 @@ <h3>Don't animate root elements</h3>
11501178
<h3>Infinite animations should be avoided</h3>
11511179
<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>
11521180
<h3>Mind the initial and final state of your elements</h3>
1153-
<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>
1181+
<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>
11541182
<h3>Don't disable the <code>prefers-reduced-motion</code> media query</h3>
1155-
<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>
1183+
<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>
11561184
<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">
11571185
<span>See the Pen <a href="https://codepen.io/eltonmesquita/pen/oNjGGbw">
11581186
Prefers-reduce-motion media query</a> by Elton Mesquita (<a href="https://codepen.io/eltonmesquita">@eltonmesquita</a>)
@@ -1315,9 +1343,9 @@ <h2>Core Team</h2>
13151343
<table>
13161344
<thead>
13171345
<tr>
1318-
<th><img src="https://avatars2.githubusercontent.com/u/439365?s=460&amp;u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&amp;v=4" alt=""></th>
1319-
<th><img src="https://avatars2.githubusercontent.com/u/5007208?s=460&amp;u=418401ee605824272e5dcb955fd64ea24546a857&amp;v=4" alt=""></th>
1320-
<th><img src="https://avatars1.githubusercontent.com/u/15052701?s=460&amp;u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&amp;v=4" alt=""></th>
1346+
<th><img src="https://avatars2.githubusercontent.com/u/439365?s=460&amp;u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&amp;v=4" alt="" width="150" height="150"></th>
1347+
<th><img src="https://avatars2.githubusercontent.com/u/5007208?s=460&amp;u=418401ee605824272e5dcb955fd64ea24546a857&amp;v=4" alt="" width="150" height="150"></th>
1348+
<th><img src="https://avatars1.githubusercontent.com/u/15052701?s=460&amp;u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&amp;v=4" alt="" width="150" height="150"></th>
13211349
</tr>
13221350
</thead>
13231351
<tbody>
@@ -1352,7 +1380,7 @@ <h3>Code of Conduct</h3>
13521380
</div>
13531381
<aside class="sidebar">
13541382
<div class="meta">
1355-
<a href="https://github.com/animate-css/animate.css" target="_blank" class="icon-github">
1383+
<a href="https://github.com/animate-css/animate.css" target="_blank" class="icon-github" aria-label="View source on GitHub">
13561384
<svg
13571385
xmlns="http://www.w3.org/2000/svg"
13581386
fill="none"
@@ -1399,7 +1427,7 @@ <h3>Code of Conduct</h3>
13991427
rel="noopener noreferrer"
14001428
href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
14011429
>
1402-
here</a
1430+
on Google Developers</a
14031431
>.
14041432
</p>
14051433
</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,
@@ -257,7 +258,7 @@ blockquote {
257258

258259
animation-delay: 0.3s;
259260

260-
color: var(--c-secondary);
261+
color: var(--c-secondary-dark);
261262
font-size: 1.3333rem;
262263
font-size: min(10vw, 1.3333rem);
263264
}

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,17 @@
4444
"devDependencies": {
4545
"autoprefixer": "^10.4.7",
4646
"cssnano": "^5.0.17",
47-
"eslint": "^7.32.0",
48-
"husky": "^9.1.4",
47+
"eslint": "^4.1.1",
48+
"husky": "^7.0.4",
4949
"lint-staged": "^11.2.6",
5050
"markdown-it": "^12.3.2",
5151
"npm-run-all": "^4.1.5",
5252
"postcss": "^8.4.14",
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": {

0 commit comments

Comments
 (0)