diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/timeline/timeline-element/timeline-element.html.ts
index 6f082af..9eb474b 100644
--- a/src/page/timeline/timeline-element/timeline-element.html.ts
+++ b/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>`
         }
diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss
index 16990ce..e286996 100644
--- a/src/page/timeline/timeline-element/timeline-element.scss
+++ b/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);
             }
           }
 
diff --git a/src/style/vars.scss b/src/style/vars.scss
index 39e8d3e..c01a982 100644
--- a/src/style/vars.scss
+++ b/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;