Change spaceship moving animation at correct times during transition animation

poll.coffee

@@ -46,7 +46,10 @@ warp = ->
   # first stretch stars to create accelerating feel
   Velocity star_tails,
     {width: '500px'},
-    {duration: 1000, easing: 'ease-in'}
+    {
+      duration: 1000, easing: 'ease-in',
+      complete: -> document.body.className = 'excited'
+    }
 
   # then shift
   for tail in star_tails
@@ -65,18 +68,21 @@ unwarp = ->
   for tail, i in star_tails
     Velocity tail,
       {width: star_heights[i]},
-      {duration: 1000, easing: 'ease-in'}
+      {
+        duration: 1000, easing: 'ease-in',
+        complete: -> document.body.className = 'cruising'
+      }
 
 transitions =
-  cruising_excited: [warp]
-  excited_cruising: [unwarp]
+  cruising_excited: warp
+  excited_cruising: unwarp
 
 set_state = (newstate) ->
   oldstate = document.body.className
   if oldstate != newstate
     console.log 'set state from', oldstate, 'to', newstate
-    f() for f in transitions[oldstate + '_' + newstate] ? []
-    document.body.className = newstate
+    transitions[oldstate + '_' + newstate]?()
+    #document.body.className = newstate
 
 if debug
   document.addEventListener 'keypress', (e) ->

style.less

@@ -86,13 +86,11 @@ img, div {
 
 /* Cruising state */
 
-.cruising {
-  .spaceship {
-    animation: cruising-movement @cruising-move-duration linear 0s infinite;
+.cruising .spaceship {
+  animation: cruising-movement @cruising-move-duration linear 0s infinite;
 
-    img {
-      animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
-    }
+  img {
+    animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
   }
 }
 
@@ -108,20 +106,12 @@ img, div {
 
 /* Excited state */
 
-.excited {
-  .spaceship {
-    animation: excited-movement @excited-move-duration linear 0s infinite;
-
-    img {
-      animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
-    }
-  }
+.excited .spaceship {
+  animation: excited-movement @excited-move-duration linear 0s infinite;
 
-  /*
-  .bg {
-    animation: excited-bg-tilt 3s linear 0s infinite alternate;
+  img {
+    animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
   }
-  */
 }
 
 @keyframes excited-movement {
@@ -133,8 +123,3 @@ img, div {
   from { transform: rotateZ(-@excited-nose-tilt / 2) }
   to   { transform: rotateZ(@excited-nose-tilt / 2) }
 }
-
-@keyframes excited-bg-tilt {
-  from { transform: rotateZ(0) }
-  to   { transform: rotateZ(70deg) }
-}