Updated animation
This commit is contained in:
@@ -27,16 +27,19 @@
|
|||||||
animation: launch 4s ease-in-out infinite;
|
animation: launch 4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 🚀 Rocket diagonal takeoff */
|
||||||
@keyframes launch {
|
@keyframes launch {
|
||||||
0% { transform: translate(0, 0); opacity: 1; }
|
0% { transform: translate(0, 0); opacity: 1; }
|
||||||
70% { transform: translate(200px, -200px); opacity: 1; }
|
60% { transform: translate(200px, -200px); opacity: 1; }
|
||||||
100% { transform: translate(400px, -400px); opacity: 0; }
|
100% { transform: translate(500px, -500px) scale(1.2); opacity: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 📉 Text drops quickly off-screen + fades */
|
||||||
@keyframes textShift {
|
@keyframes textShift {
|
||||||
0% { transform: translateY(0); }
|
0% { transform: translateY(0); opacity: 1; }
|
||||||
70% { transform: translateY(30px); } /* faster drop while rocket rises */
|
40% { transform: translateY(20px); opacity: 1; }
|
||||||
100% { transform: translateY(50px); } /* ends lower, exaggerating zoom effect */
|
60% { transform: translateY(80px); opacity: 0.8; }
|
||||||
|
100% { transform: translateY(300px); opacity: 0; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user