1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 01:50:52 +01:00

Tweaked animations

This commit is contained in:
squidfunk 2021-02-15 14:03:15 +01:00
parent 1728fceb8a
commit c13df97654

View File

@ -9,15 +9,15 @@
opacity: 0.1;
}
20%,
70% {
transform: scale(1.1);
opacity: 1;
}
50% {
transform: scale(1);
}
15%,
75% {
transform: scale(1.1);
opacity: 1;
}
}
.container {
@ -53,7 +53,7 @@
height: 100%;
background-image: linear-gradient(#1A1A1A, #5E5E5E);
border-radius: 100%;
animation: backdrop infinite both 10s 1s ease-in-out;
animation: backdrop infinite both 10s 1s cubic-bezier(0.7, 0, 0.3, 1);
}
h1 {
@ -74,12 +74,11 @@
<div class="logo">
<div class="backdrop"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<polygon id="p1">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1s;p1o.end+1s" id="p1i"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
3.136 17.387, 3.136 60.319, 3.136 60.319, 3.136 60.319;
3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387
@ -88,7 +87,7 @@
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p1i.end+5s" id="p1o"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387;
3.136 17.387, 3.136 60.319, 3.136 60.319, 3.136 60.319
@ -105,12 +104,11 @@
from="0.5" to="1"
/>
</polygon>
<polygon id="p2" style="fill-opacity: 0.5;">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1s;p2o.end+1s" id="p2i"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
21.910 50.932, 21.910 50.932, 3.136 60.319, 3.136 60.319;
21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387
@ -119,7 +117,7 @@
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p2i.end+5s" id="p2o"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
21.910 8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387;
21.910 50.932, 21.910 50.932, 3.136 60.319, 3.136 60.319
@ -136,13 +134,12 @@
from="1" to="0.5"
/>
</polygon>
<clipPath id="clip">
<polygon id="p3">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1s;p3o.end+1s" id="p3i"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
21.910 50.932, 21.910 50.932, 89 89, 89 0;
21.910 8.000, 64.843 72.398, 89 89, 89 0
@ -151,7 +148,7 @@
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p3i.end+5s" id="p3o"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
21.910 8.000, 64.843 72.398, 89 89, 89 0;
21.910 50.932, 21.910 50.932, 89 89, 89 0
@ -159,12 +156,11 @@
/>
</polygon>
</clipPath>
<polygon id="p4" clip-path="url(#clip)">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1.125s;p4o.end+1s" id="p4i"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
dur="2s" begin="1.25s;p4o.end+1s" id="p4i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052;
67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052
@ -173,7 +169,7 @@
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p4i.end+5s" id="p4o"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
67.535 17.387, 21.509 48.04, 62.151 68.361, 67.535 71.052;
67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052
@ -190,12 +186,11 @@
from="0.5" to="1"
/>
</polygon>
<polygon id="p5" clip-path="url(#clip)" style="fill-opacity: 0.25;">
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="1.125s;p5o.end+1s" id="p5i"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
dur="2s" begin="1.25s;p5o.end+1s" id="p5i"
keyTimes="0;1" keySplines="0.16 1 0.3 1"
values="
67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053;
67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387
@ -204,7 +199,7 @@
<animate
attributeName="points" calcMode="spline" fill="freeze"
dur="2s" begin="p5i.end+5s" id="p5o"
keyTimes="0;1" keySplines="0.87 0 0.13 1"
keyTimes="0;1" keySplines="0.7 0 0.84 0"
values="
67.535 71.053, 86.309 61.665, 86.309 8.000, 67.535 17.387;
67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB