Restore 404 page animation in WebKit

johndjameson · johndjameson · commit e9f65fb91eec · 2015-06-04T21:56:14.000-04:00
Currently scoped to WebKit because IE doesn't apply CSS animations to
SVG elements at all, and Firefox doesn't properly support the
transform-origin property.
diff --git a/client/stylesheets/structures/_errorHero.sass b/client/stylesheets/structures/_errorHero.sass
@@ -9,6 +9,8 @@
 //
 // .errorHero
 //   .errorHero-img
+//     .errorHero-img-boat
+//     .errorHero-img-ocean
 //
 // *************************************
 
@@ -37,3 +39,30 @@
   max-width: none
   position: absolute
   width: 90vw
+
+// Scaffolding
+
+// Scaffolding: Boat
+
+.errorHero-img-boat
+  animation: errorHero-img-boat 1.25s ease-in-out infinite alternate
+  transform-origin: center
+
+// Scaffolding: Ocean
+
+.errorHero-img-ocean
+  animation: slideLeft1of6 2.5s linear infinite
+
+// ------------------------------------
+//   Animations
+// ------------------------------------
+
+// ----- Image ----- //
+
+// Boat
+
+@-webkit-keyframes errorHero-img-boat
+  from
+    transform: translateY(-$errorHero-bob-offset) rotate(-2deg)
+  to
+    transform: translateY($errorHero-bob-offset) rotate(1deg)
