Added animations to text

jjasminew · Nov 17, 2022 · d8d01da · d8d01da
1 parent 49e8ed3
commit d8d01da
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git a/hardtokeepgoing.html b/hardtokeepgoing.html
@@ -13,17 +13,19 @@
 </head>
 
 <body>
+<div id="msg1" class="msg-receive">
   <div class="chat5">
   <div class="them">
     <blockquote>i just have no idea what the hell i'm doing</blockquote>
   </div>
 </div>
-  
+
   <div class="chat3">
   <div class="them">
     <blockquote>it's so hard to keep going. and it's only going to get harder</blockquote>
   </div>
 </div>
+</div>
 
 
   <script src="script.js"></script>

diff --git a/nothingschanged.html b/nothingschanged.html
@@ -12,6 +12,7 @@
 </head>
 
 <body>
+  <div id="msg1" class="msg-receive">
   <div class="chat5">
   <div class="them">
     <blockquote>nothing's changed. i'm still the same as before</blockquote>
@@ -24,6 +25,7 @@
     <blockquote>it feels like i'm right back to where i was</blockquote>
   </div>
 </div>
+  </div>
 
   <div class="textOptions">
     <h1 class="firstBtn"><a href="hardtobelieve.html">progress isn't always straightforward. you have to trust the process.</a></h1>

diff --git 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;
+  }
+}