yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-23 04:30:11 +09:00
Code Releases Activity

Add animation, allow animate-* to use hover: and focus:

Browse Source
This commit is contained in:
yude 2021-02-21 16:54:28 +09:00
parent ff5247999e
commit 954a166d2e
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
tailwind.config.js
View File

@ -25,9 +25,19 @@ module.exports = {
extend: { extend: {
animation:{ animation:{
blur: 'blur 2.5s linear infinite', blur: 'blur 2.5s linear infinite',
heartbeat: 'heartbeat 3s linear infinite' heartbeat: 'heartbeat 3s linear infinite',
rumble: 'rumble 0.1s linear infinite',
}, },
keyframes:{ keyframes:{
rumble: {
'0%': { transform: 'translate(0, 0)', filter: 'rotate(0)' },
'16.66%': { transform: 'translate(4px, -2px)', filter: 'rotate(-5deg)' },
'33.32%': { transform: 'translate(4px, 2px)', filter: 'rotate(5deg)' },
'49.98%': { transform: 'translate(0, 0)', filter: 'rotate(0)' },
'66.64%': { transform: 'translate(-4px, -2px)', filter: 'rotate(5deg)' },
'83.30%': { transform: 'translate(-4px, 2px)', filter: 'rotate(-5deg)' },
'100%': { transform: 'translate(0, 0)', filter: 'rotate(0)' },
},
blur: { blur: {
'0%, 100%': {filter: 'blur(8px)'}, '0%, 100%': {filter: 'blur(8px)'},
'50%': {filter: 'blur(0px)'} '50%': {filter: 'blur(0px)'}
@ -36,10 +46,11 @@ module.exports = {
'0%, 100%': {filter: 'drop-shadow(0px 0px 1px rgb(255, 255, 255))'}, '0%, 100%': {filter: 'drop-shadow(0px 0px 1px rgb(255, 255, 255))'},
'50%': {filter: 'drop-shadow(0px 0px 8px rgb(255, 255, 255))'} '50%': {filter: 'drop-shadow(0px 0px 8px rgb(255, 255, 255))'}
}, },
} },
} }
}, },
variants: { variants: {
animation: ['hover', 'focus'], // allow animate-* to use hover: and focus:
filter: ['responsive'], // defaults to ['responsive'] filter: ['responsive'], // defaults to ['responsive']
backdropFilter: ['responsive'], // defaults to ['responsive'] backdropFilter: ['responsive'], // defaults to ['responsive']
aspectRatio: ['responsive'], aspectRatio: ['responsive'],