FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

separate animated mfm

Browse source
This commit is contained in:
Johann150 2023-02-12 16:30:01 +01:00
parent b22e627089
commit 636ac82bcc
Signed by: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 52 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
packages/client/src/mfm.scss
View file

@ -3,43 +3,6 @@
text-align: center;
}
.mfm-jelly {
animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;
}
.mfm-twitch {
animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
}
.mfm-shake {
animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
}
.mfm-spin {
animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
}
.mfm-spin[data-mfm-y] {
animation-name: mfm-spinY;
}
.mfm-spin[data-mfm-x] {
animation-name: mfm-spinX;
}
.mfm-spin[data-mfm-alternate] {
animation-direction: alternate;
}
.mfm-spin[data-mfm-left] {
animation-direction: reverse;
}
.mfm-jump {
animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
}
.mfm-bounce {
animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
transform-origin: center bottom;
}
.mfm-flip {
transform: scaleX(-1);
}
@ -69,15 +32,6 @@
font-family: math;
}
.mfm-rainbow {
animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
}
.mfm-rotate {
transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
transform-origin: center center;
}
.mfm-blur {
filter: blur(6px);
transition: filter 0.3s;
@ -87,10 +41,11 @@
}
}
.mfm-tada {
animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
--mfm-zoom-size: 150%;
.mfm-rotate {
transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
transform-origin: center center;
}
.mfm-x2 {
--mfm-zoom-size: 200%;
}
@ -114,6 +69,54 @@
}
}
.animated-mfm {
.mfm-jelly {
animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;
}
.mfm-twitch {
animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
}
.mfm-shake {
animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
}
.mfm-spin {
animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
}
.mfm-spin[data-mfm-y] {
animation-name: mfm-spinY;
}
.mfm-spin[data-mfm-x] {
animation-name: mfm-spinX;
}
.mfm-spin[data-mfm-alternate] {
animation-direction: alternate;
}
.mfm-spin[data-mfm-left] {
animation-direction: reverse;
}
.mfm-jump {
animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
}
.mfm-bounce {
animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
transform-origin: center bottom;
}
.mfm-rainbow {
animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
}
.mfm-tada {
animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
--mfm-zoom-size: 150%;
}
}
/* animation keyframes */
@keyframes mfm-spin {