Merge pull request #252 from ruby/adjust-train-animation

Heroアニメーション調整：train を heartbeat 同期に変更

Author: taea

javascripts/hero-animation.js

@@ -188,14 +188,9 @@ document.addEventListener('DOMContentLoaded', () => {
                   setTimeout(() => {
                       // Train has a special slide-in animation (no bounce)
                       if (illust.hasAttribute('data-hero-train')) {
-                          // Train appears later and starts running immediately after slide-in
+                          // Train appears later with slide-in animation
                           setTimeout(() => {
                               illust.classList.add('animate-train-slide-in');
-                              // Start running animation right after slide-in completes (600ms)
-                              setTimeout(() => {
-                                  illust.classList.remove('animate-train-slide-in');
-                                  illust.classList.add('animate-train-running');
-                              }, 600);
                           }, trainExtraDelay);
                       } else {
                           illust.classList.add('animate-pop-in');
@@ -235,14 +230,16 @@ document.addEventListener('DOMContentLoaded', () => {
         if (layers.illustMain) {
           const illusts = layers.illustMain.querySelectorAll('img');
           illusts.forEach(illust => {
-            // Train already has running animation, skip it
+            // Remove initial animation classes first to avoid conflict
+            illust.classList.remove('animate-pop-in');
+            illust.classList.remove('animate-train-slide-in');
+            // Train uses its own heartbeat animation with gatagata movement
             if (illust.hasAttribute('data-hero-train')) {
-              return;
+              illust.classList.add('animate-train-heartbeat');
+            } else {
+              // Use illust-specific heartbeat that preserves opacity
+              illust.classList.add('animate-heartbeat-illust');
             }
-            // Remove pop-in animation class first to avoid conflict
-            illust.classList.remove('animate-pop-in');
-            // Use illust-specific heartbeat that preserves opacity
-            illust.classList.add('animate-heartbeat-illust');
           });
         }
       }, heartbeatStartDelay);

stylesheets/compiled.css

@@ -3179,7 +3179,7 @@ body:is(.dark *){
 }
 
 .animate-heartbeat{
-  animation: heartbeat 10s ease-in-out infinite;
+  animation: heartbeat 8s ease-in-out infinite;
 }
 
 @keyframes heartbeat-illust{
@@ -3215,7 +3215,7 @@ body:is(.dark *){
 }
 
 .animate-heartbeat-illust{
-  animation: heartbeat-illust 10s ease-in-out infinite;
+  animation: heartbeat-illust 8s ease-in-out infinite;
 }
 
 @keyframes pop-in{
@@ -3263,6 +3263,52 @@ body:is(.dark *){
   animation: scroll-left 60s linear infinite;
 }
 
+@keyframes train-heartbeat{
+  0%, 100%{
+    opacity: 1;
+    transform: translateX(0) rotate(var(--tw-rotate, 0deg));
+  }
+
+  0.5%{
+    opacity: 1;
+    transform: translateX(2px) rotate(calc(var(--tw-rotate, 0deg) + 0.4deg));
+  }
+
+  1%{
+    opacity: 1;
+    transform: translateX(-1.5px) rotate(calc(var(--tw-rotate, 0deg) - 0.3deg));
+  }
+
+  1.5%{
+    opacity: 1;
+    transform: translateX(2px) rotate(calc(var(--tw-rotate, 0deg) + 0.3deg));
+  }
+
+  2%{
+    opacity: 1;
+    transform: translateX(-1px) rotate(calc(var(--tw-rotate, 0deg) - 0.2deg));
+  }
+
+  2.5%{
+    opacity: 1;
+    transform: translateX(1.5px) rotate(calc(var(--tw-rotate, 0deg) + 0.2deg));
+  }
+
+  3%{
+    opacity: 1;
+    transform: translateX(-0.5px) rotate(calc(var(--tw-rotate, 0deg) - 0.1deg));
+  }
+
+  3.5%{
+    opacity: 1;
+    transform: translateX(0) rotate(var(--tw-rotate, 0deg));
+  }
+}
+
+.animate-train-heartbeat{
+  animation: train-heartbeat 8s ease-in-out infinite;
+}
+
 @keyframes train-running{
   0%, 100%{
     opacity: 1;

tailwind.config.js

@@ -40,6 +40,7 @@ module.exports = {
     'animate-heartbeat-illust',
     'animate-train-slide-in',
     'animate-train-running',
+    'animate-train-heartbeat',
   ],
   theme: {
     container: {
@@ -124,6 +125,17 @@ module.exports = {
           '50%': { opacity: '1', transform: 'translateX(-1px) rotate(calc(var(--tw-rotate, 0deg) - 0.2deg))' },
           '75%': { opacity: '1', transform: 'translateX(1.5px) rotate(calc(var(--tw-rotate, 0deg) + 0.2deg))' },
         },
+        // Train heartbeat animation (gatagata movement at 10s intervals)
+        'train-heartbeat': {
+          '0%, 100%': { opacity: '1', transform: 'translateX(0) rotate(var(--tw-rotate, 0deg))' },
+          '0.5%': { opacity: '1', transform: 'translateX(2px) rotate(calc(var(--tw-rotate, 0deg) + 0.4deg))' },
+          '1%': { opacity: '1', transform: 'translateX(-1.5px) rotate(calc(var(--tw-rotate, 0deg) - 0.3deg))' },
+          '1.5%': { opacity: '1', transform: 'translateX(2px) rotate(calc(var(--tw-rotate, 0deg) + 0.3deg))' },
+          '2%': { opacity: '1', transform: 'translateX(-1px) rotate(calc(var(--tw-rotate, 0deg) - 0.2deg))' },
+          '2.5%': { opacity: '1', transform: 'translateX(1.5px) rotate(calc(var(--tw-rotate, 0deg) + 0.2deg))' },
+          '3%': { opacity: '1', transform: 'translateX(-0.5px) rotate(calc(var(--tw-rotate, 0deg) - 0.1deg))' },
+          '3.5%': { opacity: '1', transform: 'translateX(0) rotate(var(--tw-rotate, 0deg))' },
+        },
         'wave-scroll': {
           '0%': { transform: 'translateX(0)' },
           '100%': { transform: 'translateX(-50%)' },
@@ -137,10 +149,11 @@ module.exports = {
         'pop-in': 'pop-in 0.4s ease-out forwards',
         'gem-zoom-in': 'gem-zoom-in 0.6s ease-out forwards',
         'fade-slide-in': 'fade-slide-in 0.6s ease-out forwards',
-        'heartbeat': 'heartbeat 10s ease-in-out infinite',
-        'heartbeat-illust': 'heartbeat-illust 10s ease-in-out infinite',
+        'heartbeat': 'heartbeat 8s ease-in-out infinite',
+        'heartbeat-illust': 'heartbeat-illust 8s ease-in-out infinite',
         'train-slide-in': 'train-slide-in 0.6s ease-out forwards',
         'train-running': 'train-running 0.4s ease-in-out infinite',
+        'train-heartbeat': 'train-heartbeat 8s ease-in-out infinite',
         'wave-scroll': 'wave-scroll 2s linear infinite',
       },
       colors: {