implement tile movement

style/helpers.scss

@@ -30,3 +30,26 @@
   -webkit-transition-property: $args;
   -moz-transition-property: $args;
 }
+
+// Keyframe animations
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes $animation-name {
+    @content;
+  }
+  @-moz-keyframes $animation-name {
+    @content;
+  }
+  @keyframes $animation-name {
+    @content;
+  }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+}
+
+@mixin animation-fill-mode($str) {
+  -webkit-animation-fill-mode: #{$str};
+  -moz-animation-fill-mode: #{$str};
+}

style/main.css

@@ -89,8 +89,8 @@ hr {
   line-height: 116.25px;
   font-size: 55px;
   font-weight: bold;
-  -webkit-transition: 200ms ease;
-  -moz-transition: 200ms ease;
+  -webkit-transition: 100ms ease-in-out;
+  -moz-transition: 100ms ease-in-out;
   -webkit-transition-property: top, left;
   -moz-transition-property: top, left; }
   .tile.tile-position-1-1 {
@@ -205,6 +205,39 @@ hr {
     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
     font-size: 35px; }
 
+@-webkit-keyframes appear {
+  0% {
+    -webkit-transform: scale(1.5);
+    opacity: 0; }
+
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 1; } }
+
+@-moz-keyframes appear {
+  0% {
+    -webkit-transform: scale(1.5);
+    opacity: 0; }
+
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 1; } }
+
+@keyframes appear {
+  0% {
+    -webkit-transform: scale(1.5);
+    opacity: 0; }
+
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 1; } }
+
+.tile-new {
+  -webkit-animation: appear 200ms ease 100ms;
+  -moz-animation: appear 200ms ease 100ms;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both; }
+
 .game-intro {
   margin-bottom: 0; }
 

style/main.scss

@@ -14,6 +14,8 @@ $tile-color: #eee4da;
 $tile-gold-color: #edc22e;
 $tile-gold-glow-color: lighten($tile-gold-color, 15%);
 
+$transition-speed: 100ms;
+
 html, body {
   margin: 0;
   padding: 0;
@@ -132,7 +134,7 @@ hr {
   font-size: 55px;
   font-weight: bold;
 
-  @include transition(200ms ease);
+  @include transition($transition-speed ease-in-out);
   @include transition-property(top, left);
 
   // Build position classes
@@ -205,6 +207,23 @@ hr {
   }
 }
 
+@include keyframes(appear) {
+  0% {
+    -webkit-transform: scale(1.5);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.tile-new {
+  @include animation(appear 200ms ease $transition-speed);
+  @include animation-fill-mode(both);
+}
+
 .game-intro {
   margin-bottom: 0;
 }