brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add hand wave animation

Browse Source
This commit is contained in:
Brandon Egger 2023-04-13 00:27:02 -05:00
parent 321bedcee9
commit 97d29309e0
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/about.tsx
View File

@ -70,7 +70,7 @@ const About: NextPage = () => {
<div className="block sm:hidden w-full bg-neutral-900 p-4">
<h1 className="text-white text-4xl font-bold text-center">
Meet the Team
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave"/>
<HandRaisedIcon className="ml-4 rotate-12 text-yellow-200 inline w-12 animate-hand_wave animate-hand_pop"/>
</h1>
</div>
{/** Large screens */}

12
tailwind.config.cjs
View File

@ -17,16 +17,18 @@ const config = {
'100%': { transform: 'translate(0%)' },
},
wiggle_rotate: {
'0%, 100%': { transform: 'rotate(0)' },
'50%': { transform: 'rotate(12)' },
'75%': { transform: 'rotate(-12)' },
}
'0%, 60%, 100%': { transform: 'rotate(0deg)' },
'42%': { transform: 'rotate(-6deg)' },
'50%': { transform: 'rotate(4deg)' },
'6%, 30%': { transform: 'rotate(24deg)' },
'18%': { transform: 'rotate(-12deg)' },
},
},
animation: {
expand_in_out: 'expand_in_out 2s ease-in-out infinite',
slide_search_page: 'slide_left_full 0.5s ease-in-out',
slide_search_page_backwards: 'slide_right_full 0.5s ease-in-out',
hand_wave: 'wiggle_rotate 0.5s ease-in-out infinite',
hand_wave: 'wiggle_rotate 1.5s ease-in-out infinite',
},
},
},