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