From d8d01da043c52bec9cc899e4afbfe65a4762bfe0 Mon Sep 17 00:00:00 2001 From: Jasmine Wongphatarakul <110138906+jjasminew@users.noreply.github.com> Date: Thu, 17 Nov 2022 08:11:12 +0000 Subject: [PATCH] Added animations to text --- hardtokeepgoing.html | 4 ++- nothingschanged.html | 2 ++ style.css | 67 ++++++++++++++++++++++++++++++++++++-------- 3 files changed, 60 insertions(+), 13 deletions(-) diff --git a/hardtokeepgoing.html b/hardtokeepgoing.html index 2dec997..8de088e 100644 --- a/hardtokeepgoing.html +++ b/hardtokeepgoing.html @@ -13,17 +13,19 @@ +
i just have no idea what the hell i'm doing
- +
it's so hard to keep going. and it's only going to get harder
+
diff --git a/nothingschanged.html b/nothingschanged.html index 8747977..318698f 100644 --- a/nothingschanged.html +++ b/nothingschanged.html @@ -12,6 +12,7 @@ +
nothing's changed. i'm still the same as before
@@ -24,6 +25,7 @@
it feels like i'm right back to where i was
+

progress isn't always straightforward. you have to trust the process.

diff --git a/style.css b/style.css index 17cd7b6..b8b4d48 100644 --- a/style.css +++ b/style.css @@ -77,7 +77,7 @@ body{ .chat blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 60%; @@ -92,7 +92,7 @@ body{ .chat2 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 52%; @@ -107,7 +107,7 @@ body{ .chat3 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 40%; @@ -122,7 +122,7 @@ body{ .chat4 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 45%; @@ -137,7 +137,7 @@ body{ .chat5 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 45%; @@ -152,7 +152,7 @@ body{ .chat6 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 40%; @@ -167,7 +167,7 @@ body{ .chat7 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 67%; @@ -182,7 +182,7 @@ body{ .chat8 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 48%; @@ -197,7 +197,7 @@ body{ .chat9 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 60%; @@ -212,7 +212,7 @@ body{ .chat10 blockquote { font-family: monospace; - font-size: 50px; + font-size: 40px; font-weight: 400; margin-left: 5%; margin-right: 40%; @@ -295,7 +295,7 @@ blockquote:last-child::before { text-decoration: none; color: #000000; font-weight: 400; - font-size: 27px; + font-size: 24px; } .alignOptions{ @@ -310,7 +310,7 @@ blockquote:last-child::before { text-decoration: none; color: #000000; font-weight: 400; - font-size: 27px; + font-size: 24px; } .firstBtn{ @@ -363,3 +363,46 @@ blockquote:last-child::before { text-decoration: none; color: #FFFFFF; } + +:root { + --msg-content-height: 26.5em; + --msg-spacing: 1em; + --msg1-height: 5.5em; + --msg2-height: 20em; +} + +.msg-receive { + position: relative; + animation-iteration-count: 1; + animation-duration: 8s; + animation-fill-mode: forwards; +} + + +/*Animation Names*/ + +#msg1 { + animation-name: msg1; +} + +/*Key Frames*/ + +@keyframes msg1 { + 0% { + top: calc(var(--msg1-height)); + left: 0; + transform: scale(0); + } + 5% { + top: calc(var(--msg1-height)); + left: 0; + transform: scale(1); + } + 17% { + top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height)); + } + } + 100% { + left: 0; + } +}