diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2020-11-02 15:16:37 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2020-11-02 15:16:37 +0900 |
| commit | 09cab605fc87888249b1c8b13a3af3ded3ebba6d (patch) | |
| tree | 9be13050968691aa6f6e52c2cfc09ec9648fe733 /src/client | |
| parent | Improve usability (diff) | |
| download | sharkey-09cab605fc87888249b1c8b13a3af3ded3ebba6d.tar.gz sharkey-09cab605fc87888249b1c8b13a3af3ded3ebba6d.tar.bz2 sharkey-09cab605fc87888249b1c8b13a3af3ded3ebba6d.zip | |
Add new MFM animation
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/components/mfm.ts | 6 | ||||
| -rw-r--r-- | src/client/style.scss | 15 |
2 files changed, 21 insertions, 0 deletions
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 7a8ee8b19f..7e4fec2848 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -125,6 +125,12 @@ export default defineComponent({ }, genEl(token.children)); } + case 'twitch': { + return h('span', { + style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-twitch 0.5s ease infinite;' : 'display: inline-block;' + }, genEl(token.children)); + } + case 'url': { return [h(MkUrl, { key: Math.random(), diff --git a/src/client/style.scss b/src/client/style.scss index cbcd497e22..be9e373291 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -499,6 +499,21 @@ hr { 100% { transform: translateY(0); } } +// const gen = () => `translate(${Math.floor(Math.random() * 24) - 12}px, ${Math.floor(Math.random() * 24) - 12}px)` +@keyframes anime-twitch { + 0% { transform: translate(0px, -9px); } + 10% { transform: translate(5px, -11px); } + 20% { transform: translate(-12px, 2px); } + 30% { transform: translate(10px, 4px); } + 40% { transform: translate(0px, 9px); } + 50% { transform: translate(-6px, 2px); } + 60% { transform: translate(-7px, 7px); } + 70% { transform: translate(14px, 7px); } + 80% { transform: translate(-5px, 10px); } + 90% { transform: translate(3px, -3px); } + 100% { transform: translate(10px, 8px); } +} + @keyframes anime-tada { from { transform: scale3d(1, 1, 1); |