Improve animations

src/page/timeline/timeline-element/timeline-element.html.ts

@@ -35,7 +35,7 @@ export const generate = (
         ${
           more &&
           `<div tabindex=0 class="info-button">
-              <div class="svgContainer">${info}</div>
+              <div class="svg-container">${info}</div>
               <p>${showMore}</p>
             </div>`
         }

src/page/timeline/timeline-element/timeline-element.scss

@@ -141,7 +141,7 @@
         overflow: hidden;
         margin: 0;
         height: 0;
-        transition: height var(--transition-time);
+        transition: height var(--transition-time-long);
 
         > p {
           margin-top: var(--line-height);
@@ -162,14 +162,14 @@
           @include image-button(var(--icon-size));
           @include main-font();
 
-          .svgContainer {
+          .svg-container {
             position: relative;
             margin: auto;
             @include square(var(--icon-size));
 
             svg {
               stroke: var(--normal-text-color);
-              transition: stroke var(--transition-time);
+              transition: stroke var(--transition-time), transform var(--transition-time);
             }
           }
 

src/style/vars.scss

@@ -2,6 +2,7 @@
 
 :root {
   --transition-time: 150ms;
+  --transition-time-long: 300ms;
   --line-width: 3px;
   --line-height: 18px;
   --accent-color: #b7455e;