diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2020-11-08 17:08:51 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2020-11-08 17:08:51 +0900 |
| commit | 66c4e8064b929b8cf8325fb55cba85bc01e67bf6 (patch) | |
| tree | 12f8a56e65bc4cdcb74271a275aa8c335497e395 /src/client/components | |
| parent | autoWatch機能を削除 (diff) | |
| download | sharkey-66c4e8064b929b8cf8325fb55cba85bc01e67bf6.tar.gz sharkey-66c4e8064b929b8cf8325fb55cba85bc01e67bf6.tar.bz2 sharkey-66c4e8064b929b8cf8325fb55cba85bc01e67bf6.zip | |
Add bounce MFM animation
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/mfm.ts | 4 | ||||
| -rw-r--r-- | src/client/components/misskey-flavored-markdown.vue | 8 |
2 files changed, 12 insertions, 0 deletions
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 0b25f0b183..d83cd41528 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 e20c19884b..3123d7aa80 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`; } |