diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 75b4b803d..6dcae5018 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -644,6 +644,8 @@ _mfm: tadaDescription: "ジャーン!という感じのアニメーションを与えます。" jump: "アニメーション(ジャンプ)" jumpDescription: "飛び跳ねるようなアニメーションを与えます。" + bounce: "アニメーション(バウンド)" + bounceDescription: "ぽよんぽよん弾むようなアニメーションを与えます。" shake: "アニメーション(ぶるぶる)" shakeDescription: "ぶるぶるするアニメーションを与えます。" twitch: "アニメーション(ブレ)" diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 0b25f0b18..d83cd4152 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -117,6 +117,10 @@ export default defineComponent({ style = this.$store.state.device.animatedMfm ? 'animation: mfm-jump 0.75s linear infinite;' : ''; break; } + case 'bounce': { + style = this.$store.state.device.animatedMfm ? 'animation: mfm-bounce 0.75s linear infinite; transform-origin: center bottom;' : ''; + break; + } case 'flip': { const transform = (token.node.props.args.h && token.node.props.args.v) ? 'scale(-1, -1)' : diff --git a/src/client/components/misskey-flavored-markdown.vue b/src/client/components/misskey-flavored-markdown.vue index e20c19884..3123d7aa8 100644 --- a/src/client/components/misskey-flavored-markdown.vue +++ b/src/client/components/misskey-flavored-markdown.vue @@ -37,6 +37,14 @@ export default defineComponent({ 100% { transform: translateY(0); } } +@keyframes mfm-bounce { + 0% { transform: translateY(0) scale(1, 1); } + 25% { transform: translateY(-16px) scale(1, 1); } + 50% { transform: translateY(0) scale(1, 1); } + 75% { transform: translateY(0) scale(1.5, 0.75); } + 100% { transform: translateY(0) scale(1, 1); } +} + // const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`; // let css = ''; // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; } diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index c3e212027..c9346d3fc 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -175,6 +175,16 @@ +
{{ $t('_mfm.bounceDescription') }}
+