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

client: move MFM animations to MFM component

Browse source
This commit is contained in:
Johann150 2022-12-18 00:49:28 +01:00
parent 4574db523a
commit 2520633210
Signed by: Johann150
GPG key ID: 9EE6577A2A06F8F1
3 changed files with 8 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/global/misskey-flavored-markdown.vue
View file

@ -155,6 +155,13 @@ withDefaults(defineProps<{
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
}
@keyframes mfm-tada {
0%, 100% { transform: scale3d(1, 1, 1); }
10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
}
</style>
<style lang="scss" scoped>

2
packages/client/src/components/mfm.ts
View file

@ -92,7 +92,7 @@ export default defineComponent({
switch (token.props.name) {
case 'tada': {
const speed = validTime(token.props.args.speed) || '1s';
style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: mfm-tada ${speed} linear infinite both;` : '');
break;
}
case 'jelly': {

43
packages/client/src/style.scss
View file

@ -486,46 +486,3 @@ hr {
30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.5); }
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes bounce{
0% {
transform: scaleX(0.90) scaleY(0.90) ;
}
19% {
transform: scaleX(1.10) scaleY(1.10) ;
}
48% {
transform: scaleX(0.95) scaleY(0.95) ;
}
100% {
transform: scaleX(1.00) scaleY(1.00) ;
}
}