updated animation
This commit is contained in:
@@ -19,6 +19,7 @@
|
|||||||
h1 {
|
h1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
animation: textShift 4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rocket {
|
.rocket {
|
||||||
@@ -27,9 +28,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes launch {
|
@keyframes launch {
|
||||||
0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
|
0% { transform: translate(0, 0); opacity: 1; }
|
||||||
70% { transform: translate(200px, -200px) rotate(0deg); opacity: 1; }
|
70% { transform: translate(200px, -200px); opacity: 1; }
|
||||||
100% { transform: translate(400px, -400px) rotate(0deg); opacity: 0; }
|
100% { transform: translate(400px, -400px); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes textShift {
|
||||||
|
0% { transform: translateY(0); }
|
||||||
|
70% { transform: translateY(30px); } /* faster drop while rocket rises */
|
||||||
|
100% { transform: translateY(50px); } /* ends lower, exaggerating zoom effect */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user