Loading...
Loading...
Compare original and translation side by side
cubic-bezier(0.0, 0, 0.2, 1)cubic-bezier(0.0, 0, 0.2, 1)| Element | Duration | Easing |
|---|---|---|
| Quick hit | 100-150ms | |
| Bounce | 300-400ms | |
| Reveal | 200-300ms | |
| Sequence step | 50-100ms | |
| 元素 | 时长 | 缓动函数 |
|---|---|---|
| 快速触发效果 | 100-150ms | |
| 弹跳效果 | 300-400ms | |
| 展示效果 | 200-300ms | |
| 序列步骤 | 50-100ms | |
--energy-snap: cubic-bezier(0.0, 0, 0.2, 1);
--energy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--energy-punch: cubic-bezier(0.22, 1, 0.36, 1);--energy-snap: cubic-bezier(0.0, 0, 0.2, 1);
--energy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--energy-punch: cubic-bezier(0.22, 1, 0.36, 1);@keyframes energy-burst {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes energy-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
@keyframes energy-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}@keyframes energy-burst {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes energy-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
@keyframes energy-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}