acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

tweak animation, respect prefers-reduced-motion

Browse Source
This commit is contained in:
Samuel Newman
2024-10-31 11:16:35 +00:00
parent 92cff7d7fc
commit 29755e6d84
2 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/templates/base.html
+23 -3
View File
@@ -79,6 +79,7 @@
} }
#splash svg { #splash svg {
width: 100px; width: 100px;
margin-bottom: 100px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#splash { #splash {
@@ -86,9 +87,21 @@
} }
} }
.animate-splash { .animate-splash {
animation: splash-out 0.2s ease-in forwards; animation: fade-out 0.2s ease-in forwards;
} }
@keyframes splash-out { .animate-splash svg {
animation: scale-out 0.2s ease-in forwards;
}
@media (prefers-reduced-motion) {
.animate-splash {
opacity: 0;
animation: none;
}
.animate-splash svg {
animation: none;
}
}
@keyframes fade-out {
0% { 0% {
opacity: 1; opacity: 1;
} }
@@ -97,6 +110,13 @@
} }
100% { 100% {
opacity: 0; opacity: 0;
}
}
@keyframes scale-out {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5); transform: scale(1.5);
} }
} }
@@ -125,7 +145,7 @@
<div id="splash"> <div id="splash">
<!-- Bluesky SVG --> <!-- Bluesky SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 330"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
</div> </div>
<noscript> <noscript>
web/index.html
+23 -3
View File
@@ -84,6 +84,7 @@
} }
#splash svg { #splash svg {
width: 100px; width: 100px;
margin-bottom: 100px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#splash { #splash {
@@ -91,9 +92,21 @@
} }
} }
.animate-splash { .animate-splash {
animation: splash-out 0.2s ease-in forwards; animation: fade-out 0.2s ease-in forwards;
} }
@keyframes splash-out { .animate-splash svg {
animation: scale-out 0.2s ease-in forwards;
}
@media (prefers-reduced-motion) {
.animate-splash {
opacity: 0;
animation: none;
}
.animate-splash svg {
animation: none;
}
}
@keyframes fade-out {
0% { 0% {
opacity: 1; opacity: 1;
} }
@@ -102,6 +115,13 @@
} }
100% { 100% {
opacity: 0; opacity: 0;
}
}
@keyframes scale-out {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5); transform: scale(1.5);
} }
} }
@@ -167,7 +187,7 @@
<div id="splash"> <div id="splash">
<!-- Bluesky SVG --> <!-- Bluesky SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 330"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
</div> </div>
</body> </body>
</html> </html>