💄 Style: update timeline animation

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);
-        }
       }
     }
   }

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 }}