48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
 
|
import { keyframes, style } from '@vanilla-extract/css';
|
||
|
|
import { color, toRem } from 'folds';
|
||
|
|
|
||
|
|
const wobble = keyframes({
|
||
|
|
'0%': {
|
||
|
|
transform: 'translateX(0) rotateZ(0deg)',
|
||
|
|
},
|
||
|
|
'20%': {
|
||
|
|
transform: `translateX(-${toRem(4)}) rotateZ(-4deg)`,
|
||
|
|
},
|
||
|
|
'40%': {
|
||
|
|
transform: `translateX(${toRem(4)}) rotateZ(4deg)`,
|
||
|
|
},
|
||
|
|
'60%': {
|
||
|
|
transform: `translateX(-${toRem(3)}) rotateZ(-3deg)`,
|
||
|
|
},
|
||
|
|
'80%': {
|
||
|
|
transform: `translateX(${toRem(3)}) rotateZ(3deg)`,
|
||
|
|
},
|
||
|
|
'100%': {
|
||
|
|
transform: 'translateX(0) rotateZ(0deg)',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const glowPulse = keyframes({
|
||
|
|
'0%': {
|
||
|
|
boxShadow: `0 0 0 ${toRem(0)} ${color.Success.ContainerActive}`,
|
||
|
|
},
|
||
|
|
'100%': {
|
||
|
|
boxShadow: `0 0 0 ${toRem(8)} ${color.Success.ContainerActive}`,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export const WobbleAnimation = style({
|
||
|
|
animation: `${wobble} 2000ms ease-in-out`,
|
||
|
|
animationIterationCount: 'infinite',
|
||
|
|
});
|
||
|
|
|
||
|
|
export const GlowAnimation = style({
|
||
|
|
animation: `${glowPulse} 2000ms ease-out`,
|
||
|
|
animationIterationCount: 'infinite',
|
||
|
|
});
|
||
|
|
|
||
|
|
export const CallAvatarAnimation = style({
|
||
|
|
animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
|
||
|
|
animationIterationCount: 'infinite',
|
||
|
|
});
|