A few sass tweaks to problem alerts and level loading.

app/styles/play/level/loading.sass

@@ -35,11 +35,7 @@
     padding: 10px
     text-align: center
     // http://matthewlein.com/ceaser/  Bounce down a bit, then snap up.
-    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, 0, 0.670, 0)
-    -webkit-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
-    -moz-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
-    -o-transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
-    transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600)
+    @include transition(top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600))
 
     .load-progress
       position: absolute
@@ -88,9 +84,9 @@
   .left-wing
     @include wing-background('/images/level/loading_left_wing.png', right)
     left: -50%
-    transition: all $UNVEIL_TIME ease
+    @include transition(all $UNVEIL_TIME ease)
 
   .right-wing
     @include wing-background('/images/level/loading_right_wing.png', left)
     right: -50%
-    transition: all $UNVEIL_TIME ease
+    @include transition(all $UNVEIL_TIME ease)

app/styles/play/level/tome/problem_alert.sass

@@ -19,13 +19,7 @@
   border-width: 16px 20px
 
   // Jiggle animation
-  // TODO: Cleanup browser compat nonsense with sass mixin
-  // TODO: http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
-  animation-duration: .4s
-  animation-name: jiggle
-  animation-play-state: running
-  animation-iteration-count: infinite
-  @keyframes jiggle
+  +keyframes(jiggle)
     0%
       transform: rotate(0deg)
     25%
@@ -36,36 +30,9 @@
       transform: rotate(-1deg)
     100%
       transform: rotate(0deg)
-  -moz-animation-duration: .4s
-  -moz-animation-name: jiggle
-  -moz-animation-play-state: running
-  -moz-animation-iteration-count: infinite
-  @-moz-keyframes jiggle
-    0%
-      -moz-transform: rotate(0deg)
-    25%
-      -moz-transform: rotate(1deg)
-    50%
-      -moz-transform: rotate(0deg)
-    75%
-      -moz-transform: rotate(-1deg)
-    100%
-      -moz-transform: rotate(0deg)
-  -webkit-animation-duration: .4s
-  -webkit-animation-name: jiggle
-  -webkit-animation-play-state: running
-  -webkit-animation-iteration-count: infinite
-  @-webkit-keyframes jiggle
-    0%
-      -webkit-transform: rotate(0deg)
-    25%
-      -webkit-transform: rotate(1deg)
-    50%
-      -webkit-transform: rotate(0deg)
-    75%
-      -webkit-transform: rotate(-1deg)
-    100%
-      -webkit-transform: rotate(0deg)
+
+  &.jiggling
+    @include animation(jiggle .4s infinite)
 
   &.no-hint
     // Since it's probably only one line, let's make it not look weird by being tiny.

app/views/play/level/tome/Problem.coffee

@@ -6,7 +6,8 @@ module.exports = class Problem
   constructor: (@aether, @aetherProblem, @ace, isCast=false, @levelID) ->
     @buildAnnotation()
     @buildMarkerRange() if isCast
-    Backbone.Mediator.publish("problem:problem-created", line:@annotation.row, text: @annotation.text) if application.isIPadApp
+    # TODO: get ACE screen line, too, for positioning, since any multiline "lines" will mess up positioning
+    Backbone.Mediator.publish("problem:problem-created", line: @annotation.row, text: @annotation.text) if application.isIPadApp
 
   destroy: ->
     @removeMarkerRange()

app/views/play/level/tome/ProblemAlertView.coffee

@@ -19,7 +19,7 @@ module.exports = class ProblemAlertView extends CocoView
   constructor: (options) ->
     super options
     if options.problem?
-      @problem = options.problem 
+      @problem = options.problem
       @onWindowResize()
     else
       @$el.hide()
@@ -56,13 +56,9 @@ module.exports = class ProblemAlertView extends CocoView
 
   onJiggleProblemAlert: ->
     if @$el.is(":visible")
-      @$el.css('animation-play-state', 'running')
-      @$el.css('-moz-animation-play-state', 'running')
-      @$el.css('-webkit-animation-play-state', 'running')
+      @$el.addClass 'jiggling'
       pauseJiggle = =>
-        @$el.css('animation-play-state', 'paused')
-        @$el.css('-moz-animation-play-state', 'paused')
-        @$el.css('-webkit-animation-play-state', 'paused')
+        @$el?.removeClass 'jiggling'
       _.delay pauseJiggle, 2000
 
   onHideProblemAlert: ->
@@ -72,12 +68,12 @@ module.exports = class ProblemAlertView extends CocoView
     @$el.hide()
     @problem = null
 
-  onWindowResize: (e) => 
+  onWindowResize: (e) =>
     # TODO: This all seems a little hacky
     if @problem?
       @$el.css('left', $('#goals-view').outerWidth(true) + 'px')
       @$el.css('right', $('#code-area').outerWidth(true) + 'px')
 
-      # 45px from top roughly aligns top of alert with top of first code line
+      # 110px from top roughly aligns top of alert with top of first code line
       # TODO: calculate this in a more dynamic, less sketchy way
-      @$el.css('top', (45 + @lineOffsetPx) + 'px')
+      @$el.css('top', (110 + @lineOffsetPx) + 'px')