Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css: add notification animation

Browse Source 
simple slide animation, plus a little scale effect when a duplicate
notification gets sent to make the notification more obvious.
This commit is contained in:
Harvey Tindall
2023-06-26 20:13:02 +01:00
parent baf5e6a593
commit 5a80145607
2 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tailwind.config.js
+35 -1
View File
@@ -23,10 +23,44 @@ module.exports = {
opacity: '0'
}
},
'slide-in': {
'0%': {
opacity: '0',
transform: 'translateY(-100%)'
},
'100%': {
opacity: '1',
transform: 'translateY(0%)'
},
},
'slide-out': {
'0%': {
opacity: '1',
transform: 'translateY(0%)'
},
'100%': {
opacity: '0',
transform: 'translateY(-100%)'
},
},
'pulse': {
'0%': {
transform: 'scale(1)'
},
'50%': {
transform: 'scale(1.05)'
},
'100%': {
transform: 'scale(1)'
}
}
},
animation: {
'fade-in': 'fade-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
'slide-in': 'slide-in 0.2s cubic-bezier(.08,.52,.01,.98)',
'slide-out': 'slide-out 0.2s cubic-bezier(.08,.52,.01,.98)',
'pulse': 'pulse 0.2s cubic-bezier(0.25, 0.45, 0.45, 0.94)'
},
colors: {
neutral: colors.slate,