jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:26:37 -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

32
pages/index.tsx
View File

@ -67,26 +67,26 @@ const Paragraph = styled("p", {
},
});
const hello = keyframes({
"0%": { transform: "rotate(0deg)" },
"5%": { transform: "rotate(14deg)" },
"10%": { transform: "rotate(-8deg)" },
"15%": { transform: "rotate(14deg)" },
"20%": { transform: "rotate(-4deg)" },
"25%": { transform: "rotate(10deg)" },
"30%": { transform: "rotate(0deg)" },
// pause for ~9 out of 10 seconds
"100%": { transform: "rotate(0deg)" },
});
const Wave = styled("span", {
display: "inline-block",
marginLeft: "0.1em",
fontSize: "1.2em",
animation: `${hello} 5s infinite`,
animationDelay: "1s",
transformOrigin: "65% 80%",
willChange: "transform",
"@media (prefers-reduced-motion: no-preference)": {
animation: `${keyframes({
"0%": { transform: "rotate(0deg)" },
"5%": { transform: "rotate(14deg)" },
"10%": { transform: "rotate(-8deg)" },
"15%": { transform: "rotate(14deg)" },
"20%": { transform: "rotate(-4deg)" },
"25%": { transform: "rotate(10deg)" },
"30%": { transform: "rotate(0deg)" },
// pause for ~9 out of 10 seconds
"100%": { transform: "rotate(0deg)" },
})} 5s ease 1s infinite`,
transformOrigin: "65% 80%",
willChange: "transform",
},
});
const Sup = styled("sup", {