From 49cb1216c3950d3fc2a43d9150d91d71620cdc4f Mon Sep 17 00:00:00 2001 From: "Martin Rattensberger (aider)" Date: Sun, 6 Oct 2024 23:21:02 +0200 Subject: [PATCH] feat: Enhance text animation with typewriter effect and fade transitions --- animation.html | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/animation.html b/animation.html index 0d99fab..576b144 100644 --- a/animation.html +++ b/animation.html @@ -17,20 +17,36 @@ } .text { position: absolute; - animation: fadeText 6s infinite; font-size: 2em; 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 { - 0%, 33% { opacity: 1; } - 50%, 83% { opacity: 0; } - 100% { opacity: 1; } + 0%, 33% { opacity: 0; } + 50%, 83% { opacity: 1; } + 100% { opacity: 0; } } -
The Next BIG Thing...
-
stay tuned
-
coming soon
+
The Next BIG Thing...
+
stay tuned
+
coming soon