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"> <div className="block sm:hidden w-full bg-neutral-900 p-4">
<h1 className="text-white text-4xl font-bold text-center"> <h1 className="text-white text-4xl font-bold text-center">
Meet the Team 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> </h1>
</div> </div>
{/** Large screens */} {/** Large screens */}

12
tailwind.config.cjs
View File

@ -17,16 +17,18 @@ const config = {
'100%': { transform: 'translate(0%)' }, '100%': { transform: 'translate(0%)' },
}, },
wiggle_rotate: { wiggle_rotate: {
'0%, 100%': { transform: 'rotate(0)' }, '0%, 60%, 100%': { transform: 'rotate(0deg)' },
'50%': { transform: 'rotate(12)' }, '42%': { transform: 'rotate(-6deg)' },
'75%': { transform: 'rotate(-12)' }, '50%': { transform: 'rotate(4deg)' },
} '6%, 30%': { transform: 'rotate(24deg)' },
'18%': { transform: 'rotate(-12deg)' },
},
}, },
animation: { animation: {
expand_in_out: 'expand_in_out 2s ease-in-out infinite', 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: 'slide_left_full 0.5s ease-in-out',
slide_search_page_backwards: 'slide_right_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',
}, },
}, },
}, },