| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- @keyframes slideRight {
- from {
- transform: translateX(0%);
- position:absolute;
- }
- to {
- transform: translateX(100%);
- position:absolute;
- } }
- @keyframes slideRightIn {
- from {
- transform: translateX(100%);
- position:absolute;
- }
- to {
- transform: translateX(0%);
- position:absolute;
- }
- }
- @keyframes slideLeft {
- from {
- transform: translateX(0%);
- position:absolute;
- }
- to {
- transform: translateX(-100%);
- position:absolute;
- } }
- @keyframes slideLeftIn {
- from {
- transform: translateX(-100%);
- position:absolute;
- }
- to {
- transform: translateX(-0%);
- position:absolute;
- }
- }
- @keyframes popup {
- 0% {
- transform: scale(0) translateX(-50%);
- }
- 15% {
- transform: scale(1) translateX(-50%);
- }
- 85% {
- transform: scale(1) translateX(-50%);
- }
- 100% {
- transform: scale(0) translateX(-50%);
- }
- }
- @keyframes confetti-fall {
- 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
- 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
- }
-
- .confetti {
- position: absolute;
- width: 10px;
- height: 10px;
- animation: confetti-fall 3s linear infinite;
- }
-
- @keyframes pulse-glow {
- 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
- 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8); }
- }
-
- .glow-effect {
- animation: pulse-glow 2s ease-in-out infinite;
- }
- @keyframes float {
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
- 50% { transform: translateY(-10px) rotate(5deg); }
- }
- .float-animation {
- animation: float 3s ease-in-out infinite;
- }
- @keyframes sparkle {
- 0%, 100% { opacity: 1; transform: scale(1); }
- 50% { opacity: 0.7; transform: scale(1.2); }
- }
- .sparkle {
- animation: sparkle 1.5s ease-in-out infinite;
- }
|