@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
42 lines (41 loc) • 1.1 kB
JavaScript
import { css, keyframes } from "styled-components";
import styled from "../../../styles/styled";
import { motion } from "framer-motion";
export const AnimationContainer = styled(motion.div) `
user-select: none;
position: relative;
--spinner-error-opacity: 0;
&:before {
content: "";
position: absolute;
inset: 1px;
opacity: 0;
background: var(--ck-body-color-danger);
${(props) => props.$circle &&
css `
inset: -5px;
border-radius: 50%;
background: none;
box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
`}
}
${(props) => props.$shake &&
css `
animation: ${shakeKeyframes} 220ms ease-out both;
&:before {
animation: ${outlineKeyframes} 220ms ease-out 750ms both;
}
`}
`;
const dist = 2;
const shakeKeyframes = keyframes `
0%{ transform:none; }
25%{ transform:translateX(${dist}px); }
50%{ transform:translateX(-${dist}px); }
75%{ transform:translateX(${dist}px); }
100%{ transform:none; }
`;
const outlineKeyframes = keyframes `
0%{ opacity:1; }
100%{ opacity:0; }
`;