From 9894d9900ca43d26587aed934e6d7bcdc7b8622c Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Tue, 23 Jul 2024 11:31:43 +0800
Subject: [PATCH] :lipstick: Style: update timeline animation

---
 assets/css/_shortcodes/_timeline.scss | 16 ++++++----------
 layouts/partials/plugin/timeline.html | 24 ++++++++++++------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/assets/css/_shortcodes/_timeline.scss b/assets/css/_shortcodes/_timeline.scss
index 237b489b..3a46fc8e 100644
--- a/assets/css/_shortcodes/_timeline.scss
+++ b/assets/css/_shortcodes/_timeline.scss
@@ -11,21 +11,17 @@
   &[data-animation] {
     .#{$prefix}timeline-item::before {
       border-color: var(--timeline-color);
-      animation-name: border-color-fade;
-      animation-duration: 2s;
+      animation-name: change-border-color;
+      animation-duration: 0.9s;
+      animation-direction: alternate;
       animation-iteration-count: infinite;
+      animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
       animation-delay: calc(var(--timeline-index) * 0.3s);
   
-      @keyframes border-color-fade {
-        0% {
-          border-color: var(--timeline-color);
-        }
-        50% {
+      @keyframes change-border-color {
+        to {
           border-color: var(--timeline-circle-color);
         }
-        100% {
-          border-color: var(--timeline-color);
-        }
       }
     }
   }
diff --git a/layouts/partials/plugin/timeline.html b/layouts/partials/plugin/timeline.html
index 27d66a87..42fe0352 100644
--- a/layouts/partials/plugin/timeline.html
+++ b/layouts/partials/plugin/timeline.html
@@ -5,18 +5,6 @@
 {{- $size := .Options.size | default "medium" -}}
 {{- $node := .Options.node | default "circle" -}}
 
-{{- /* Set Timeline style  */ -}}
-{{- $style := "" -}}
-{{- with .Options.width -}}
-  {{- $style = printf "width: %v;" . -}}
-{{- end -}}
-{{- with .Options.height -}}
-  {{- $style = add $style (printf "height: %v;" .) -}}
-{{- end -}}
-{{- with $style -}}
-  {{- $style = printf `style="%v"` $style -}}
-{{- end -}}
-
 {{- /* Get Timeline events */ -}}
 {{- $events := slice -}}
 {{- with .Inner -}}
@@ -27,6 +15,18 @@
 {{- end -}}
 {{- $events = sort $events "timestamp" (cond $reverse "desc" "asc") -}}
 
+{{- /* Set Timeline style  */ -}}
+{{- $style := "" -}}
+{{- with .Options.width -}}
+  {{- $style = printf "width: %v;" . -}}
+{{- end -}}
+{{- with .Options.height -}}
+  {{- $style = add $style (printf "height: %v;" .) -}}
+{{- end -}}
+{{- with $style -}}
+  {{- $style = printf `style="%v"` . -}}
+{{- end -}}
+
 <ul
   class="fi-timeline{{ with .Options.class }} {{ . }}{{ end }}"
   {{ $style | safeHTMLAttr }}