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

feat: Enhance text animation with typewriter effect and fade transitions

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

30
animation.html
View File

@@ -17,20 +17,36 @@
} }
.text { .text {
position: absolute; position: absolute;
animation: fadeText 6s infinite;
font-size: 2em; font-size: 2em;
opacity: 0.8; opacity: 0.8;
white-space: nowrap;
overflow: hidden;
border-right: 0.15em solid orange;
}
.typewriter {
animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
}
.fade {
animation: fadeText 6s infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: orange; }
} }
@keyframes fadeText { @keyframes fadeText {
0%, 33% { opacity: 1; } 0%, 33% { opacity: 0; }
50%, 83% { opacity: 0; } 50%, 83% { opacity: 1; }
100% { opacity: 1; } 100% { opacity: 0; }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="text">The Next BIG Thing...</div> <div class="text typewriter">The Next BIG Thing...</div>
<div class="text" style="animation-delay: 2s;">stay tuned</div> <div class="text fade" style="animation-delay: 3.5s;">stay tuned</div>
<div class="text" style="animation-delay: 4s;">coming soon</div> <div class="text fade" style="animation-delay: 6s;">coming soon</div>
</body> </body>
</html> </html>