Borders and padding were causing reflow with animation. Animation now only animates...

diff --git a/static/css/screen.css b/static/css/screen.css
index 773f42c..929b707 100644 (file)
--- a/static/css/screen.css
+++ b/static/css/screen.css
@@ -104,10 +104,10 @@ html > body {
   border-radius: 5px; }
 
 section {
-  -moz-transition-property: all;
-  -webkit-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
+  -moz-transition-property: background;
+  -webkit-transition-property: background;
+  -o-transition-property: background;
+  transition-property: background;
   -moz-transition-duration: 0.15s;
   -webkit-transition-duration: 0.15s;
   -o-transition-duration: 0.15s;

diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index b531c1a..b56beda 100644 (file)
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -48,7 +48,7 @@
 }
 
 section{
-       @include transition(all, .15s, linear);
+       @include transition(background, .15s, linear);
 }
 
 body{