Martin_Rattensberger_IT_Services/thenextbigthing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Adjust fade animation to prevent overlap and ensure sequential display

Browse Source
This commit is contained in:
Martin Rattensberger
2024-10-06 23:21:38 +02:00
parent 49cb1216c3
commit d0b36169dc
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
animation.html
View File

@@ -28,6 +28,7 @@
}
.fade {
animation: fadeText 6s infinite;
opacity: 0;
}
@keyframes typing {
from { width: 0; }
@@ -39,14 +40,14 @@
}
@keyframes fadeText {
0%, 33% { opacity: 0; }
50%, 83% { opacity: 1; }
100% { opacity: 0; }
34%, 66% { opacity: 1; }
67%, 100% { opacity: 0; }
}
</style>
</head>
<body>
<div class="text typewriter">The Next BIG Thing...</div>
<div class="text fade" style="animation-delay: 3.5s;">stay tuned</div>
<div class="text fade" style="animation-delay: 6s;">coming soon</div>
<div class="text fade" style="animation-delay: 4s;">stay tuned</div>
<div class="text fade" style="animation-delay: 8s;">coming soon</div>
</body>
</html>