reduce motion

Signed-off-by: Adrien Kara <adrien@iglou.eu>
This commit is contained in:
Adrien Kara 2022-02-13 01:29:41 +01:00
parent 64fd25874e
commit 09a1457b34
Signed by: adrien
GPG Key ID: 605B69551C56DB62
2 changed files with 7 additions and 1 deletions

View File

@ -473,6 +473,12 @@ progress {
--button-background: var(--c-white);
}
@media (prefers-reduced-motion:reduce) {
:root {
--t-duration: 0s;
}
}
/* # Animations */
/* # Global */

View File

@ -1 +1 @@
<svg id="visual" viewBox="0 0 1700 80" width="1700" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><style type="text/css">@keyframes wave{0%, 5% {transform:translateY(0px)} 95%, 100% {transform:translateY(5px)}}path{animation:5s alternate-reverse infinite 0s wave ease-in-out;will-change:transform}#svg_wave_2{animation-delay:-1s}#svg_wave_3{animation-delay:-2s}</style><rect x="0" y="0" width="1700" height="80" fill="#ffffff"></rect><path id="svg_wave_1" d="M0 58L47.2 54.8C94.3 51.7 188.7 45.3 283.2 44.3C377.7 43.3 472.3 47.7 566.8 44.3C661.3 41 755.7 30 850 24.7C944.3 19.3 1038.7 19.7 1133.2 25.8C1227.7 32 1322.3 44 1416.8 49C1511.3 54 1605.7 52 1652.8 51L1700 50L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#c3caf7"></path><path id="svg_wave_2" d="M0 59L47.2 62C94.3 65 188.7 71 283.2 66.7C377.7 62.3 472.3 47.7 566.8 46.5C661.3 45.3 755.7 57.7 850 58.7C944.3 59.7 1038.7 49.3 1133.2 47.8C1227.7 46.3 1322.3 53.7 1416.8 53.8C1511.3 54 1605.7 47 1652.8 43.5L1700 40L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#839cf2"></path><path id="svg_wave_3" d="M0 63L47.2 64.8C94.3 66.7 188.7 70.3 283.2 71.8C377.7 73.3 472.3 72.7 566.8 70.3C661.3 68 755.7 64 850 61.8C944.3 59.7 1038.7 59.3 1133.2 62.3C1227.7 65.3 1322.3 71.7 1416.8 71.5C1511.3 71.3 1605.7 64.7 1652.8 61.3L1700 58L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#0071eb"></path></svg>
<svg id="visual" viewBox="0 0 1700 80" width="1700" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><style type="text/css">@keyframes wave{0%, 5% {transform:translateY(0px)} 95%, 100% {transform:translateY(5px)}}path{animation:5s alternate-reverse infinite 0s wave ease-in-out;will-change:transform}@media (prefers-reduced-motion:reduce) {path{animation:unset}}#svg_wave_2{animation-delay:-1s}#svg_wave_3{animation-delay:-2s}</style><rect x="0" y="0" width="1700" height="80" fill="#ffffff"></rect><path id="svg_wave_1" d="M0 58L47.2 54.8C94.3 51.7 188.7 45.3 283.2 44.3C377.7 43.3 472.3 47.7 566.8 44.3C661.3 41 755.7 30 850 24.7C944.3 19.3 1038.7 19.7 1133.2 25.8C1227.7 32 1322.3 44 1416.8 49C1511.3 54 1605.7 52 1652.8 51L1700 50L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#c3caf7"></path><path id="svg_wave_2" d="M0 59L47.2 62C94.3 65 188.7 71 283.2 66.7C377.7 62.3 472.3 47.7 566.8 46.5C661.3 45.3 755.7 57.7 850 58.7C944.3 59.7 1038.7 49.3 1133.2 47.8C1227.7 46.3 1322.3 53.7 1416.8 53.8C1511.3 54 1605.7 47 1652.8 43.5L1700 40L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#839cf2"></path><path id="svg_wave_3" d="M0 63L47.2 64.8C94.3 66.7 188.7 70.3 283.2 71.8C377.7 73.3 472.3 72.7 566.8 70.3C661.3 68 755.7 64 850 61.8C944.3 59.7 1038.7 59.3 1133.2 62.3C1227.7 65.3 1322.3 71.7 1416.8 71.5C1511.3 71.3 1605.7 64.7 1652.8 61.3L1700 58L1700 81L1652.8 81C1605.7 81 1511.3 81 1416.8 81C1322.3 81 1227.7 81 1133.2 81C1038.7 81 944.3 81 850 81C755.7 81 661.3 81 566.8 81C472.3 81 377.7 81 283.2 81C188.7 81 94.3 81 47.2 81L0 81Z" fill="#0071eb"></path></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB