diff --git a/engine/src/flutter/tests/animation/basic-declarative-expected.txt b/engine/src/flutter/tests/animation/basic-declarative-expected.txt
new file mode 100644
index 0000000000..256d721022
--- /dev/null
+++ b/engine/src/flutter/tests/animation/basic-declarative-expected.txt
@@ -0,0 +1,5 @@
+Running 1 tests
+ok 1 top should amimate from 0 to 100px
+1 tests
+1 pass
+0 fail
diff --git a/engine/src/flutter/tests/animation/basic-declarative.sky b/engine/src/flutter/tests/animation/basic-declarative.sky
new file mode 100644
index 0000000000..83b428e0dd
--- /dev/null
+++ b/engine/src/flutter/tests/animation/basic-declarative.sky
@@ -0,0 +1,31 @@
+<sky>
+<import src="../resources/chai.sky" />
+<import src="../resources/mocha.sky" />
+<div id="example"></div>
+<style>
+#example {
+    width: 100px;
+    height: 100px;
+    background: red;
+    position: relative;
+    animation-name: anim;
+    animation-timing-function: linear;
+    animation-duration: 5s;
+}
+
+@keyframes anim {
+    0%   { top: 0px; }
+    100% { top: 100px; }
+}
+</style>
+<script>
+var example = document.getElementById('example');
+
+describe('top', function() {
+  it('should amimate from 0 to 100px', function() {
+    internals.pauseAnimations(3);
+    assert.equal('60px', getComputedStyle(example).top);
+  });
+});
+</script>
+</sky>
diff --git a/engine/src/flutter/tests/animation/basic-imperative-expected.txt b/engine/src/flutter/tests/animation/basic-imperative-expected.txt
new file mode 100644
index 0000000000..5d685802cf
--- /dev/null
+++ b/engine/src/flutter/tests/animation/basic-imperative-expected.txt
@@ -0,0 +1,5 @@
+Running 1 tests
+ok 1 Element.animate opacity should amimate from 0 to 1
+1 tests
+1 pass
+0 fail
diff --git a/engine/src/flutter/tests/animation/basic-imperative.sky b/engine/src/flutter/tests/animation/basic-imperative.sky
new file mode 100644
index 0000000000..2a185cb18e
--- /dev/null
+++ b/engine/src/flutter/tests/animation/basic-imperative.sky
@@ -0,0 +1,16 @@
+<sky>
+<import src="../resources/chai.sky" />
+<import src="../resources/mocha.sky" />
+<div id="example">Hello, Sky</div>
+<script>
+var example = document.getElementById('example');
+
+describe('Element.animate opacity', function() {
+  it('should amimate from 0 to 1', function() {
+    example.animate([{ opacity: 0 }, { opacity: 1}], 2000);
+    internals.pauseAnimations(.5);
+    assert.equal(.25, getComputedStyle(example).opacity);
+  });
+});
+</script>
+</sky>
diff --git a/engine/src/flutter/tests/animation/basic-transition-expected.txt b/engine/src/flutter/tests/animation/basic-transition-expected.txt
new file mode 100644
index 0000000000..ef547288f3
--- /dev/null
+++ b/engine/src/flutter/tests/animation/basic-transition-expected.txt
@@ -0,0 +1,5 @@
+Running 1 tests
+ok 1 width should transition from 100px to 200px
+1 tests
+1 pass
+0 fail
diff --git a/engine/src/flutter/tests/animation/basic-transition.sky b/engine/src/flutter/tests/animation/basic-transition.sky
new file mode 100644
index 0000000000..7fa2218d38
--- /dev/null
+++ b/engine/src/flutter/tests/animation/basic-transition.sky
@@ -0,0 +1,31 @@
+<sky>
+<import src="../resources/chai.sky" />
+<import src="../resources/mocha.sky" />
+<div></div>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: relative;
+  transition: width  2s;
+  transition-timing-function: linear;
+}
+
+div#example {
+  width: 200px;
+}
+</style>
+<script>
+var example = document.querySelector('div');
+example.offsetWidth; // force a style resolution so that next line's assigment triggers the transition
+example.id = "example";
+
+describe('width', function() {
+  it('should transition from 100px to 200px', function() {
+    internals.pauseAnimations(1);
+    assert.equal('150px', getComputedStyle(example).width);
+  });
+});
+</script>
+</sky>
diff --git a/engine/src/flutter/tools/third_party/PrettyPatch/PrettyPatch.rb b/engine/src/flutter/tools/third_party/PrettyPatch/PrettyPatch.rb
index f5d80babb7..ee3543eecb 100644
--- a/engine/src/flutter/tools/third_party/PrettyPatch/PrettyPatch.rb
+++ b/engine/src/flutter/tools/third_party/PrettyPatch/PrettyPatch.rb
@@ -324,7 +324,7 @@ h1 :hover {
 }
 
 .overallComments .open {
-  -webkit-transition: height .2s;
+  transition: height .2s;
   height: 4em;
 }
 
@@ -407,7 +407,7 @@ h1 :hover {
   font-family: sans-serif;
   font-size: small;
   font-style: normal;
-  -webkit-transition: opacity 0.5s;
+  transition: opacity 0.5s;
 }
 
 .LinkContainer a {
@@ -487,7 +487,7 @@ div:focus {
   padding: 0 3px;
   outline: 1px solid #DDD;
   color: #8FDF5F;
-  font-size: small;   
+  font-size: small;
   background-color: #EEE;
 }