73 lines
1.1 KiB
JavaScript
73 lines
1.1 KiB
JavaScript
// src/constants/animations.js
|
||
// 通用动画定义 - 使用 @emotion/react 的 keyframes
|
||
|
||
import { keyframes } from '@emotion/react';
|
||
|
||
/**
|
||
* 脉冲动画 - 用于S/A级重要性标签
|
||
* 从中心向外扩散的阴影效果
|
||
*/
|
||
export const pulseAnimation = keyframes`
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
|
||
}
|
||
`;
|
||
|
||
/**
|
||
* 渐入动画
|
||
*/
|
||
export const fadeIn = keyframes`
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
`;
|
||
|
||
/**
|
||
* 从下往上滑入动画
|
||
*/
|
||
export const slideInUp = keyframes`
|
||
from {
|
||
transform: translateY(20px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
`;
|
||
|
||
/**
|
||
* 缩放进入动画
|
||
*/
|
||
export const scaleIn = keyframes`
|
||
from {
|
||
transform: scale(0.9);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
`;
|
||
|
||
/**
|
||
* 旋转动画（用于Loading Spinner）
|
||
*/
|
||
export const spin = keyframes`
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
`;
|