moved annotation return styling effect to css

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -25,17 +25,27 @@
   cursor: pointer;
 
   @each $highlight in (
-    (red rgba(178,19,16,0.3)),     (orange rgba(255,165,0,0.3)),
-    (yellow rgba(255,255,10,0.3)), (green rgba(25,255,132,0.3)),
-    (blue rgba(35,163,255,0.3)),   (purple rgba(115,9,178,0.3))) {
+    (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
+    (orange rgba(255,165,0,0.3) rgba(255,165,0,0.9)),
+    (yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)),
+    (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)),
+    (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)),
+    (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
     
     $marker: nth($highlight,1);
     $color: nth($highlight,2);
+    $selected_color: nth($highlight,3);
 
-    @if $marker == yellow { 
-      &.highlight { background-color: $color; } 
+    @if $marker == yellow {
+      &.highlight {
+        background-color: $color;
+        &.selected { background-color: $selected_color; }
+      }
+    }
+    &.highlight-#{$marker} {
+      background-color: $color;
+      &.selected { background-color: $selected_color; }
     }
-    &.highlight-#{$marker} { background-color: $color; }
   }
 
   &.hide {

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -149,7 +149,8 @@ class @Annotatable
         problem_el.effect 'highlight', {}, 500
 
     afterScrollToSpan: (span_el) ->
-        span_el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000
+        span_el.addClass 'selected', 400, 'swing', ->
+            span_el.removeClass 'selected', 400, 'swing'
 
     makeTipContent: (el) ->
         (api) =>