jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 07:21:17 -04:00
Code Issues Activity

fix prefers-reduced-motion detection

Browse Source
This commit is contained in:
Jake Jarvis
2022-05-03 14:57:32 -04:00
parent bb4115a529
commit 2ea6495fd8
7 changed files with 57 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Footer/Footer.tsx
View File

@@ -67,16 +67,19 @@ const Icon = styled("svg", {
const Heart = styled("span", {
display: "inline-block",
color: "$error", // somewhat ironically color the heart with the themed "error" red... </3
animation: `${keyframes({
"0%": { transform: "scale(1)" },
"2%": { transform: "scale(1.25)" },
"4%": { transform: "scale(1)" },
"6%": { transform: "scale(1.2)" },
"8%": { transform: "scale(1)" },
// pause for ~9 out of 10 seconds
"100%": { transform: "scale(1)" },
})} 10s ease 7.5s infinite`,
willChange: "transform",
"@media (prefers-reduced-motion: no-preference)": {
animation: `${keyframes({
"0%": { transform: "scale(1)" },
"2%": { transform: "scale(1.25)" },
"4%": { transform: "scale(1)" },
"6%": { transform: "scale(1.2)" },
"8%": { transform: "scale(1)" },
// pause for ~9 out of 10 seconds
"100%": { transform: "scale(1)" },
})} 10s ease 7.5s infinite`,
willChange: "transform",
},
});
export type FooterProps = ComponentProps<typeof Wrapper>;