From d79ac300f398978f1f18af2b298a544c6d9a8048 Mon Sep 17 00:00:00 2001
From: Manol Donev <manoldonev@users.noreply.github.com>
Date: Tue, 19 Jun 2018 18:58:11 +0300
Subject: [PATCH] refactor: migrate animation-demo repo content (#5970)

---
 e2e/animation/app/animation-curves/page.ts    |   63 +
 e2e/animation/app/animation-curves/page.xml   |   20 +
 e2e/animation/app/background-color/page.ts    |   21 +
 e2e/animation/app/background-color/page.xml   |   13 +
 .../app/chaining-with-promises/page.ts        |   34 +
 .../app/chaining-with-promises/page.xml       |   13 +
 .../css-animations/animate-css/animate.css    | 3340 +++++++++++++++++
 .../app/css-animations/animate-css/page.css   |    6 +
 .../app/css-animations/animate-css/page.ts    |   14 +
 .../app/css-animations/animate-css/page.xml   |   12 +
 .../css-animations/background-color/page.css  |   14 +
 .../css-animations/background-color/page.ts   |   18 +
 .../css-animations/background-color/page.xml  |    6 +
 .../app/css-animations/bounce/page.css        |   23 +
 .../app/css-animations/bounce/page.ts         |   14 +
 .../app/css-animations/bounce/page.xml        |   12 +
 .../app/css-animations/from-code/page.css     |   18 +
 .../app/css-animations/from-code/page.ts      |   20 +
 .../app/css-animations/from-code/page.xml     |   12 +
 .../css-animations/initial-animation/page.css |   26 +
 .../css-animations/initial-animation/page.xml |   10 +
 .../app/css-animations/opacity/page.css       |   14 +
 .../app/css-animations/opacity/page.ts        |   17 +
 .../app/css-animations/opacity/page.xml       |   13 +
 e2e/animation/app/css-animations/page.ts      |   15 +
 e2e/animation/app/css-animations/page.xml     |   18 +
 .../app/css-animations/settings/page.css      |   12 +
 .../app/css-animations/settings/page.ts       |   94 +
 .../app/css-animations/settings/page.xml      |   48 +
 .../app/css-animations/transform/page.css     |   17 +
 .../app/css-animations/transform/page.ts      |   14 +
 .../app/css-animations/transform/page.xml     |   11 +
 .../app/css-animations/visual-states/page.css |   14 +
 .../app/css-animations/visual-states/page.xml |    7 +
 e2e/animation/app/home/home-page.ts           |    2 +-
 e2e/animation/app/home/home-page.xml          |   10 +-
 e2e/animation/app/infinite/page.ts            |   28 +
 e2e/animation/app/infinite/page.xml           |   13 +
 e2e/animation/app/multiple-properties/page.ts |   28 +
 .../app/multiple-properties/page.xml          |   13 +
 e2e/animation/app/multiple-views/page.ts      |   62 +
 e2e/animation/app/multiple-views/page.xml     |   16 +
 e2e/animation/app/opacity/page.ts             |   20 +
 e2e/animation/app/opacity/page.xml            |   13 +
 e2e/animation/app/res/icon_100x100.png        |  Bin 0 -> 2764 bytes
 e2e/animation/app/reusing/page.ts             |   31 +
 e2e/animation/app/reusing/page.xml            |   13 +
 e2e/animation/app/rotate/page.css             |    3 +
 e2e/animation/app/rotate/page.ts              |   20 +
 e2e/animation/app/rotate/page.xml             |   13 +
 e2e/animation/app/scale/page.ts               |   21 +
 e2e/animation/app/scale/page.xml              |   13 +
 e2e/animation/app/slide-in-effect/page.ts     |   32 +
 e2e/animation/app/slide-in-effect/page.xml    |   11 +
 e2e/animation/app/translate/page.ts           |   21 +
 e2e/animation/app/translate/page.xml          |   13 +
 56 files changed, 4393 insertions(+), 6 deletions(-)
 create mode 100644 e2e/animation/app/animation-curves/page.ts
 create mode 100644 e2e/animation/app/animation-curves/page.xml
 create mode 100644 e2e/animation/app/background-color/page.ts
 create mode 100644 e2e/animation/app/background-color/page.xml
 create mode 100644 e2e/animation/app/chaining-with-promises/page.ts
 create mode 100644 e2e/animation/app/chaining-with-promises/page.xml
 create mode 100644 e2e/animation/app/css-animations/animate-css/animate.css
 create mode 100644 e2e/animation/app/css-animations/animate-css/page.css
 create mode 100644 e2e/animation/app/css-animations/animate-css/page.ts
 create mode 100644 e2e/animation/app/css-animations/animate-css/page.xml
 create mode 100644 e2e/animation/app/css-animations/background-color/page.css
 create mode 100644 e2e/animation/app/css-animations/background-color/page.ts
 create mode 100644 e2e/animation/app/css-animations/background-color/page.xml
 create mode 100644 e2e/animation/app/css-animations/bounce/page.css
 create mode 100644 e2e/animation/app/css-animations/bounce/page.ts
 create mode 100644 e2e/animation/app/css-animations/bounce/page.xml
 create mode 100644 e2e/animation/app/css-animations/from-code/page.css
 create mode 100644 e2e/animation/app/css-animations/from-code/page.ts
 create mode 100644 e2e/animation/app/css-animations/from-code/page.xml
 create mode 100644 e2e/animation/app/css-animations/initial-animation/page.css
 create mode 100644 e2e/animation/app/css-animations/initial-animation/page.xml
 create mode 100644 e2e/animation/app/css-animations/opacity/page.css
 create mode 100644 e2e/animation/app/css-animations/opacity/page.ts
 create mode 100644 e2e/animation/app/css-animations/opacity/page.xml
 create mode 100644 e2e/animation/app/css-animations/page.ts
 create mode 100644 e2e/animation/app/css-animations/page.xml
 create mode 100644 e2e/animation/app/css-animations/settings/page.css
 create mode 100644 e2e/animation/app/css-animations/settings/page.ts
 create mode 100644 e2e/animation/app/css-animations/settings/page.xml
 create mode 100644 e2e/animation/app/css-animations/transform/page.css
 create mode 100644 e2e/animation/app/css-animations/transform/page.ts
 create mode 100644 e2e/animation/app/css-animations/transform/page.xml
 create mode 100644 e2e/animation/app/css-animations/visual-states/page.css
 create mode 100644 e2e/animation/app/css-animations/visual-states/page.xml
 create mode 100644 e2e/animation/app/infinite/page.ts
 create mode 100644 e2e/animation/app/infinite/page.xml
 create mode 100644 e2e/animation/app/multiple-properties/page.ts
 create mode 100644 e2e/animation/app/multiple-properties/page.xml
 create mode 100644 e2e/animation/app/multiple-views/page.ts
 create mode 100644 e2e/animation/app/multiple-views/page.xml
 create mode 100644 e2e/animation/app/opacity/page.ts
 create mode 100644 e2e/animation/app/opacity/page.xml
 create mode 100644 e2e/animation/app/res/icon_100x100.png
 create mode 100644 e2e/animation/app/reusing/page.ts
 create mode 100644 e2e/animation/app/reusing/page.xml
 create mode 100644 e2e/animation/app/rotate/page.css
 create mode 100644 e2e/animation/app/rotate/page.ts
 create mode 100644 e2e/animation/app/rotate/page.xml
 create mode 100644 e2e/animation/app/scale/page.ts
 create mode 100644 e2e/animation/app/scale/page.xml
 create mode 100644 e2e/animation/app/slide-in-effect/page.ts
 create mode 100644 e2e/animation/app/slide-in-effect/page.xml
 create mode 100644 e2e/animation/app/translate/page.ts
 create mode 100644 e2e/animation/app/translate/page.xml

diff --git a/e2e/animation/app/animation-curves/page.ts b/e2e/animation/app/animation-curves/page.ts
new file mode 100644
index 000000000..eb2d437b2
--- /dev/null
+++ b/e2e/animation/app/animation-curves/page.ts
@@ -0,0 +1,63 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { AnimationCurve } from "tns-core-modules/ui/enums";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimateLinear(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.linear
+    });
+}
+
+export function onAnimateEaseIn(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.easeIn
+    });
+}
+
+export function onAnimateEaseOut(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.easeOut
+    });
+}
+
+export function onAnimateEaseInEaseOut(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.easeInOut
+    });
+}
+
+export function onAnimateSpring(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.spring
+    });
+}
+
+export function onAnimateCustom(args: EventData) {
+    view.animate({
+        translate: { x: 0, y: 100},
+        duration: 1000,
+        curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
+    });
+}
+
+export function onReset(args: EventData) {
+    view.translateX = 0;
+    view.translateY = 0;
+}
diff --git a/e2e/animation/app/animation-curves/page.xml b/e2e/animation/app/animation-curves/page.xml
new file mode 100644
index 000000000..d1e213e6e
--- /dev/null
+++ b/e2e/animation/app/animation-curves/page.xml
@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Animation Curves" />
+
+  <ScrollView>
+    <StackLayout>
+      <Button text="Linear" tap="onAnimateLinear" />
+      <Button text="EaseIn" tap="onAnimateEaseIn" />
+      <Button text="EaseOut" tap="onAnimateEaseOut" />
+      <Button text="EaseInEaseOut" tap="onAnimateEaseInEaseOut" />
+      <Button text="Spring" tap="onAnimateSpring" />
+      <Button text="Custom" tap="onAnimateCustom" />
+      <Button text="Reset" tap="onReset" />
+      <AbsoluteLayout width="300" height="200" clipToBounds="true" backgroundColor="LightGray">
+        <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="0" />
+      </AbsoluteLayout>
+    </StackLayout>
+  </ScrollView>
+
+</Page>
diff --git a/e2e/animation/app/background-color/page.ts b/e2e/animation/app/background-color/page.ts
new file mode 100644
index 000000000..379e938c9
--- /dev/null
+++ b/e2e/animation/app/background-color/page.ts
@@ -0,0 +1,21 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Color } from "tns-core-modules/color";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        backgroundColor: new Color("#3D5AFE"),
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.backgroundColor = new Color("White");
+}
diff --git a/e2e/animation/app/background-color/page.xml b/e2e/animation/app/background-color/page.xml
new file mode 100644
index 000000000..fdcd0fcf3
--- /dev/null
+++ b/e2e/animation/app/background-color/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Background Color" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view" text="{N}" width="100" height="100" left="100" top="100" style.textAlignment="center" backgroundColor="White" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/chaining-with-promises/page.ts b/e2e/animation/app/chaining-with-promises/page.ts
new file mode 100644
index 000000000..2b4284d54
--- /dev/null
+++ b/e2e/animation/app/chaining-with-promises/page.ts
@@ -0,0 +1,34 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+  view.animate({ opacity: 0 })
+      .then(() => view.animate({ opacity: 1 }))
+      .then(() => view.animate({ translate: { x: 100, y: 100 } }))
+      .then(() => view.animate({ translate: { x: 0, y: 0 } }))
+      .then(() => view.animate({ scale: { x: 3, y: 3 } }))
+      .then(() => view.animate({ scale: { x: 1, y: 1 } }))
+      .then(() => view.animate({ rotate: 180 } ))
+      .then(() => view.animate({ rotate: 0 } ))
+      .then(() => {
+      console.log("Animation finished");
+    })
+    .catch((e) => {
+      console.log(e.message);
+    });
+}
+
+export function onReset(args: EventData) {
+    view.translateX = 0;
+    view.translateY = 0;
+    view.scaleX = 1;
+    view.scaleY = 1;
+    view.rotate = 0;
+}
diff --git a/e2e/animation/app/chaining-with-promises/page.xml b/e2e/animation/app/chaining-with-promises/page.xml
new file mode 100644
index 000000000..4191d85f4
--- /dev/null
+++ b/e2e/animation/app/chaining-with-promises/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Chaining with Promises" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/css-animations/animate-css/animate.css b/e2e/animation/app/css-animations/animate-css/animate.css
new file mode 100644
index 000000000..7148b5765
--- /dev/null
+++ b/e2e/animation/app/css-animations/animate-css/animate.css
@@ -0,0 +1,3340 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.1
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2016 Daniel Eden
+ */
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0);
+  }
+}
+
+@keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    -webkit-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -30px, 0);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    -webkit-transform: translate3d(0, -15px, 0);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+  -webkit-transform-origin: center bottom;
+  transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+  from, 50%, to {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  from, 50%, to {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes rubberBand {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    -webkit-transform: scale3d(1.25, 0.75, 1);
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.75, 1.25, 1);
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.15, 0.85, 1);
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    -webkit-transform: scale3d(.95, 1.05, 1);
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    -webkit-transform: scale3d(1.05, .95, 1);
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.rubberBand {
+  -webkit-animation-name: rubberBand;
+  animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes headShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes headShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.headShake {
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-name: headShake;
+  animation-name: headShake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate3d(0, 0, 1, 15deg);
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate3d(0, 0, 1, -10deg);
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes tada {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  from {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes wobble {
+  from {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes jello {
+  from, 11.1%, to {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  22.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+@keyframes jello {
+  from, 11.1%, to {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  22.2% {
+    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+.jello {
+  -webkit-animation-name: jello;
+  animation-name: jello;
+  -webkit-transform-origin: center;
+  transform-origin: center;
+}
+
+@-webkit-keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -3000px, 0);
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 25px, 0);
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, 5px, 0);
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes bounceInLeft {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-3000px, 0, 0);
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(25px, 0, 0);
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes bounceInRight {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceInUp {
+  from, 60%, 75%, 90%, to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    -webkit-transform: scale3d(.9, .9, .9);
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes bounceOutDown {
+  20% {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(20px, 0, 0);
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    -webkit-transform: translate3d(-20px, 0, 0);
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes bounceOutUp {
+  20% {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 20px, 0);
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 2000px, 0);
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(-2000px, 0, 0);
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(2000px, 0, 0);
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -2000px, 0);
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+    transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
+    transform: perspective(400px) scale3d(.95, .95, .95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInY {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  from {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+
+  30% {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: skewX(20deg);
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: skewX(-5deg);
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, -200deg);
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -90deg);
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: none;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  from {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-transform: rotate3d(0, 0, 1, 200deg);
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  from {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate3d(0, 0, 1, 90deg);
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate3d(0, 0, 1, 80deg);
+    transform: rotate3d(0, 0, 1, 80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes rollIn {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+@keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  -webkit-animation-name: zoomIn;
+  animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+  animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInLeft {
+  -webkit-animation-name: zoomInLeft;
+  animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInRight {
+  -webkit-animation-name: zoomInRight;
+  animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInUp {
+  -webkit-animation-name: zoomInUp;
+  animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+    transform: scale3d(.3, .3, .3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+  animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutDown {
+  -webkit-animation-name: zoomOutDown;
+  animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+    transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+    transform: scale(.1) translate3d(-2000px, 0, 0);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft;
+  animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+    transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+    transform: scale(.1) translate3d(2000px, 0, 0);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+.zoomOutRight {
+  -webkit-animation-name: zoomOutRight;
+  animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutUp {
+  -webkit-animation-name: zoomOutUp;
+  animation-name: zoomOutUp;
+}
+
+@-webkit-keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
diff --git a/e2e/animation/app/css-animations/animate-css/page.css b/e2e/animation/app/css-animations/animate-css/page.css
new file mode 100644
index 000000000..8827f3e8a
--- /dev/null
+++ b/e2e/animation/app/css-animations/animate-css/page.css
@@ -0,0 +1,6 @@
+@import '~/css-animations/animate-css/animate.css';
+
+.myRubberBand {
+    animation-name: rubberBand;
+    animation-duration: 1.2s;
+}
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/animate-css/page.ts b/e2e/animation/app/css-animations/animate-css/page.ts
new file mode 100644
index 000000000..1ce76a922
--- /dev/null
+++ b/e2e/animation/app/css-animations/animate-css/page.ts
@@ -0,0 +1,14 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "";
+    view.className = "myRubberBand";
+}
diff --git a/e2e/animation/app/css-animations/animate-css/page.xml b/e2e/animation/app/css-animations/animate-css/page.xml
new file mode 100644
index 000000000..ddb921ce6
--- /dev/null
+++ b/e2e/animation/app/css-animations/animate-css/page.xml
@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Use Animate.css animation" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+       <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/css-animations/background-color/page.css b/e2e/animation/app/css-animations/background-color/page.css
new file mode 100644
index 000000000..42792d49c
--- /dev/null
+++ b/e2e/animation/app/css-animations/background-color/page.css
@@ -0,0 +1,14 @@
+.button {
+    background-color: green;
+}
+
+.button_selected {
+    animation-name: button_selected;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes button_selected {
+    from { background-color: yellow; }
+    to { background-color: red; }
+}
diff --git a/e2e/animation/app/css-animations/background-color/page.ts b/e2e/animation/app/css-animations/background-color/page.ts
new file mode 100644
index 000000000..b7b862fe5
--- /dev/null
+++ b/e2e/animation/app/css-animations/background-color/page.ts
@@ -0,0 +1,18 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onTap(args: EventData) {
+    if (view.className === "button") {
+        view.className = "button_selected";
+    }
+    else {
+        view.className = "button";
+    }
+}
diff --git a/e2e/animation/app/css-animations/background-color/page.xml b/e2e/animation/app/css-animations/background-color/page.xml
new file mode 100644
index 000000000..292aa2315
--- /dev/null
+++ b/e2e/animation/app/css-animations/background-color/page.xml
@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Background Color" />
+
+  <Button id="view" width="100" class="button" height="100" horisontal-alignment="center" vertical-alignment="center" text="Touch me" tap="onTap" />
+</Page>
diff --git a/e2e/animation/app/css-animations/bounce/page.css b/e2e/animation/app/css-animations/bounce/page.css
new file mode 100644
index 000000000..0e3ea0cc3
--- /dev/null
+++ b/e2e/animation/app/css-animations/bounce/page.css
@@ -0,0 +1,23 @@
+.bounce {
+    animation-duration: 1s;
+    animation-name: bounce;
+}
+
+@keyframes bounce {
+    from, 20%, 53%, 80%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        transform: translate3d(0,0,0);
+    }
+    40%, 43% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0,-4px,0);
+        transform: translate3d(0,-4px,0);
+    }
+}
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/bounce/page.ts b/e2e/animation/app/css-animations/bounce/page.ts
new file mode 100644
index 000000000..2e1cb2e17
--- /dev/null
+++ b/e2e/animation/app/css-animations/bounce/page.ts
@@ -0,0 +1,14 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "";
+    view.className = "bounce";
+}
diff --git a/e2e/animation/app/css-animations/bounce/page.xml b/e2e/animation/app/css-animations/bounce/page.xml
new file mode 100644
index 000000000..d59aede37
--- /dev/null
+++ b/e2e/animation/app/css-animations/bounce/page.xml
@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+ 
+  <ActionBar title="Bounce" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/css-animations/from-code/page.css b/e2e/animation/app/css-animations/from-code/page.css
new file mode 100644
index 000000000..70d850107
--- /dev/null
+++ b/e2e/animation/app/css-animations/from-code/page.css
@@ -0,0 +1,18 @@
+@keyframes bounce {
+    from, 20%, 53%, 80%, to {
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        transform: translate3d(0,0,0);
+    }
+    40%, 43% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0,-4px,0);
+        transform: translate3d(0,-4px,0);
+    }
+}
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/from-code/page.ts b/e2e/animation/app/css-animations/from-code/page.ts
new file mode 100644
index 000000000..e6d933eec
--- /dev/null
+++ b/e2e/animation/app/css-animations/from-code/page.ts
@@ -0,0 +1,20 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { KeyframeAnimation, KeyframeAnimationInfo } from "tns-core-modules/ui/animation/keyframe-animation";
+
+let view: View;
+let animationInfo: KeyframeAnimationInfo;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+    animationInfo = page.getKeyframeAnimationWithName("bounce");
+    animationInfo.duration = 2000;
+}
+
+export function onAnimate(args: EventData) {
+    let animation = KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
+    animation.play(view).then(() => {
+        console.log("Played with code!");
+    });
+}
diff --git a/e2e/animation/app/css-animations/from-code/page.xml b/e2e/animation/app/css-animations/from-code/page.xml
new file mode 100644
index 000000000..63a732531
--- /dev/null
+++ b/e2e/animation/app/css-animations/from-code/page.xml
@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="from code" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+  
+</Page>
diff --git a/e2e/animation/app/css-animations/initial-animation/page.css b/e2e/animation/app/css-animations/initial-animation/page.css
new file mode 100644
index 000000000..db909f52b
--- /dev/null
+++ b/e2e/animation/app/css-animations/initial-animation/page.css
@@ -0,0 +1,26 @@
+@keyframes entry {
+    0% {
+        transform: translate(-200, 0);
+        opacity: 0;
+    }
+    30% {
+        transform: translate(-200, 0);
+        opacity: 0;
+    }
+    70% {
+        transform: translate(200, 0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(200, 0);
+        opacity: 1;
+    }
+}
+
+.entry {
+    animation-name: entry;
+    animation-duration: 3;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
diff --git a/e2e/animation/app/css-animations/initial-animation/page.xml b/e2e/animation/app/css-animations/initial-animation/page.xml
new file mode 100644
index 000000000..21b856eaf
--- /dev/null
+++ b/e2e/animation/app/css-animations/initial-animation/page.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Initial Animation" />
+
+  <GridLayout>
+    <GridLayout class="entry" backgroundColor="red" width="200" height="200">
+    </GridLayout>
+  </GridLayout>
+
+</Page>
diff --git a/e2e/animation/app/css-animations/opacity/page.css b/e2e/animation/app/css-animations/opacity/page.css
new file mode 100644
index 000000000..a916a2e16
--- /dev/null
+++ b/e2e/animation/app/css-animations/opacity/page.css
@@ -0,0 +1,14 @@
+.opaque {
+    opacity: 1;
+}
+
+.transparent {
+    animation-name: transparent;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes transparent {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
diff --git a/e2e/animation/app/css-animations/opacity/page.ts b/e2e/animation/app/css-animations/opacity/page.ts
new file mode 100644
index 000000000..f79bf913c
--- /dev/null
+++ b/e2e/animation/app/css-animations/opacity/page.ts
@@ -0,0 +1,17 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "transparent";
+}
+
+export function onReset(args: EventData) {
+    view.className = "opaque";
+}
diff --git a/e2e/animation/app/css-animations/opacity/page.xml b/e2e/animation/app/css-animations/opacity/page.xml
new file mode 100644
index 000000000..35494b397
--- /dev/null
+++ b/e2e/animation/app/css-animations/opacity/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Opacity" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/css-animations/page.ts b/e2e/animation/app/css-animations/page.ts
new file mode 100644
index 000000000..20dcfa820
--- /dev/null
+++ b/e2e/animation/app/css-animations/page.ts
@@ -0,0 +1,15 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { Frame } from "tns-core-modules/ui/frame";
+import { Button } from "tns-core-modules/ui/button";
+
+let currentFrame: Frame;
+
+export function pageLoaded(args: EventData) {
+    currentFrame = (<Page>args.object).frame;
+}
+
+export function onButtonTap(args: EventData) {
+    const clickedButton = <Button>args.object;
+    const destination = "./css-animations/" + clickedButton.text + "/page";
+    currentFrame.navigate(destination);
+}
diff --git a/e2e/animation/app/css-animations/page.xml b/e2e/animation/app/css-animations/page.xml
new file mode 100644
index 000000000..4f64448e3
--- /dev/null
+++ b/e2e/animation/app/css-animations/page.xml
@@ -0,0 +1,18 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <Page.actionBar>
+      <ActionBar title="CSS Animations"/>
+  </Page.actionBar>
+  <ScrollView>
+    <StackLayout>
+      <Button text="background-color" tap="onButtonTap"/>
+      <Button text="opacity" tap="onButtonTap"/>
+      <Button text="transform" tap="onButtonTap"/>
+      <Button text="bounce" tap="onButtonTap"/>
+      <Button text="animate-css" tap="onButtonTap"/>
+      <Button text="from-code" tap="onButtonTap"/>
+      <Button text="settings" tap="onButtonTap"/>
+      <Button text="visual-states" tap="onButtonTap"/>
+      <Button text="initial-animation" tap="onButtonTap"/>
+    </StackLayout>
+  </ScrollView>
+</Page>
diff --git a/e2e/animation/app/css-animations/settings/page.css b/e2e/animation/app/css-animations/settings/page.css
new file mode 100644
index 000000000..68709a77b
--- /dev/null
+++ b/e2e/animation/app/css-animations/settings/page.css
@@ -0,0 +1,12 @@
+@keyframes transformed {
+    from {
+        transform: none;
+    }
+    to {
+        transform: translate(150, 0) scale(1.5, 1.5) rotate(45);
+    }
+}
+
+Label {
+    font-size: 8;
+}
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/settings/page.ts b/e2e/animation/app/css-animations/settings/page.ts
new file mode 100644
index 000000000..185676fab
--- /dev/null
+++ b/e2e/animation/app/css-animations/settings/page.ts
@@ -0,0 +1,94 @@
+import { Observable } from "tns-core-modules/data/observable";
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    page.bindingContext = new SettingsViewModel();
+}
+
+export class SettingsViewModel extends Observable {
+
+    private _duration: number = 1;
+    private _delay: number = 0;
+    private _iterations: number = 1;
+    private _selectedDirectionIndex: number = 0;
+    private _selectedFillIndex: number = 0;
+
+    constructor() {
+        super();
+    }
+
+    get iterations() {
+        return this._iterations;
+    }
+
+    set iterations(value: number) {
+        if (value !== this._iterations) {
+            this._iterations = this.roundSliderValue(value);
+        }
+    }
+
+    get delay() {
+        return this._delay;
+    }
+
+    set delay(value: number) {
+        if (value !== this._delay) {
+            this._delay = this.roundSliderValue(value);
+        }
+    }
+
+    get duration() {
+        return this._duration;
+    }
+
+    set duration(value: number) {
+        if (this._duration !== value) {
+            this._duration = this.roundSliderValue(value);
+        }
+    }
+
+    get selectedDirectionIndex() {
+        return this._selectedDirectionIndex;
+    }
+
+    set selectedDirectionIndex(value: number) {
+        if (value !== this._selectedDirectionIndex) {
+            this._selectedDirectionIndex = value;
+        }
+    }
+
+    get selectedFillIndex() {
+        return this._selectedFillIndex;
+    }
+
+    set selectedFillIndex(value: number) {
+        if (value !== this._selectedDirectionIndex) {
+            this._selectedFillIndex = value;
+        }
+    }
+
+    public onAnimate(args: EventData) {
+        const button = <Button>args.object;
+
+        let css = `
+        Label {
+            font-size: 8;
+        }
+        #img {
+            animation-name: transformed;
+            animation-duration: ${this.duration};
+            animation-delay: ${this.delay};
+            animation-iteration-count: ${this.iterations};
+            animation-direction:${this.selectedDirectionIndex === 1 ? "reverse" : "normal"};
+            animation-fill-mode: ${this.selectedFillIndex === 1 ? "forwards" : "none"};
+        }`;
+
+        button.page.css = css;
+    }
+
+    private roundSliderValue(value: number) {
+        return Math.round(value);
+    }
+}
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/settings/page.xml b/e2e/animation/app/css-animations/settings/page.xml
new file mode 100644
index 000000000..c4c95d736
--- /dev/null
+++ b/e2e/animation/app/css-animations/settings/page.xml
@@ -0,0 +1,48 @@
+<Page 
+	xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+	<ActionBar title="Settings" />
+
+	<ScrollView>
+		<StackLayout style="margin: 15;">
+			<Label text="Duration (in seconds):" />
+			<GridLayout columns="*,auto">
+				<Slider col="0" minValue="0" maxValue="10" value="{{ duration }}" />
+				<Label col="1" text="{{ duration }}" />
+			</GridLayout>
+			<Label text="Delay (in seconds):" />
+			<GridLayout columns="*,auto">
+				<Slider minValue="0" maxValue="10" value="{{ delay }}" />
+				<Label col="1" text="{{ delay }}" />
+			</GridLayout>
+			<Label text="Iterations count:" />
+			<GridLayout columns="*,auto">
+				<Slider minValue="0" maxValue="10" value="{{ iterations }}" />
+				<Label col="1" text="{{ iterations }}" />
+			</GridLayout>
+			<GridLayout rows="auto,auto">
+				<Label text="Direction:"/>
+				<SegmentedBar row="1" id="direction" style="margin: 5" selectedIndex="{{ selectedDirectionIndex }}">
+					<SegmentedBar.items>
+						<SegmentedBarItem title="Normal" />
+						<SegmentedBarItem title="Reverse" />
+					</SegmentedBar.items>
+				</SegmentedBar>
+			</GridLayout>
+			<GridLayout rows="auto,auto">
+				<Label text="Fill mode:" />
+				<SegmentedBar row="1" id="fill" style="margin: 5" selectedIndex="{{ selectedFillIndex }}">
+					<SegmentedBar.items>
+						<SegmentedBarItem title="None" />
+						<SegmentedBarItem title="Forwards" />
+					</SegmentedBar.items>
+				</SegmentedBar>
+			</GridLayout>
+			<Button text="Animate" tap="{{ onAnimate }}" height="40"/>
+			<AbsoluteLayout height="100" clipToBounds="true" backgroundColor="LightGray" margin="5">
+				<Image id="img" src="~/res/icon_100x100.png" width="50" height="50" left="0" top="25" />
+			</AbsoluteLayout>
+		</StackLayout>
+	</ScrollView>
+
+</Page>
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/transform/page.css b/e2e/animation/app/css-animations/transform/page.css
new file mode 100644
index 000000000..29db4ce90
--- /dev/null
+++ b/e2e/animation/app/css-animations/transform/page.css
@@ -0,0 +1,17 @@
+.original {
+    transform: none;
+}
+
+.transformed {
+    animation-name: transformed;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes transformed {
+    from { transform: none; }
+    30%  { transform: translate(100, 100); }
+    55%  { transform: translate(0, 0) scale(3, 3); }
+    75%  { transform: scale(1, 1) rotate(180); }
+    to  { transform: rotate(0); }
+}
diff --git a/e2e/animation/app/css-animations/transform/page.ts b/e2e/animation/app/css-animations/transform/page.ts
new file mode 100644
index 000000000..2161922c8
--- /dev/null
+++ b/e2e/animation/app/css-animations/transform/page.ts
@@ -0,0 +1,14 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.className = "original";
+    view.className = "transformed";
+}
diff --git a/e2e/animation/app/css-animations/transform/page.xml b/e2e/animation/app/css-animations/transform/page.xml
new file mode 100644
index 000000000..7ca3b12ec
--- /dev/null
+++ b/e2e/animation/app/css-animations/transform/page.xml
@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+  <Page.actionBar>
+      <ActionBar title="Transform"/>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate"/>
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100"/>
+    </AbsoluteLayout>
+  </StackLayout>
+</Page>
diff --git a/e2e/animation/app/css-animations/visual-states/page.css b/e2e/animation/app/css-animations/visual-states/page.css
new file mode 100644
index 000000000..432a827ae
--- /dev/null
+++ b/e2e/animation/app/css-animations/visual-states/page.css
@@ -0,0 +1,14 @@
+.button {
+    background-color: green;
+}
+
+.button:highlighted {
+    animation-name: highlight;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes highlight {
+    from { background-color: yellow; }
+    to { background-color: red; }
+}
\ No newline at end of file
diff --git a/e2e/animation/app/css-animations/visual-states/page.xml b/e2e/animation/app/css-animations/visual-states/page.xml
new file mode 100644
index 000000000..97b398a51
--- /dev/null
+++ b/e2e/animation/app/css-animations/visual-states/page.xml
@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+
+  <ActionBar title="Visual States"/>
+
+  <Button class="button" width="100" height="100" horisontal-alignment="center" vertical-alignment="center" text="Touch me" />
+
+</Page>
diff --git a/e2e/animation/app/home/home-page.ts b/e2e/animation/app/home/home-page.ts
index f1685944e..96580df48 100644
--- a/e2e/animation/app/home/home-page.ts
+++ b/e2e/animation/app/home/home-page.ts
@@ -4,7 +4,7 @@ import { Button } from "tns-core-modules/ui/button";
 
 let currentFrame: Frame;
 
-export function onPageLoaded(args: EventData) {
+export function pageLoaded(args: EventData) {
     currentFrame = (<Page>args.object).frame;
 }
 
diff --git a/e2e/animation/app/home/home-page.xml b/e2e/animation/app/home/home-page.xml
index cb98f3089..611e58d9a 100644
--- a/e2e/animation/app/home/home-page.xml
+++ b/e2e/animation/app/home/home-page.xml
@@ -1,24 +1,24 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onPageLoaded">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
 
     <ActionBar title="Animations" />
 
     <ScrollView>
         <StackLayout>
             <Label text="Home" />
-            <!-- <Button text="opacity" tap="onButtonTap" />
+            <Button text="opacity" tap="onButtonTap" />
             <Button text="background-color" tap="onButtonTap" />
             <Button text="translate" tap="onButtonTap" />
             <Button text="scale" tap="onButtonTap" />
             <Button text="rotate" tap="onButtonTap" />
             <Button text="multiple-properties" tap="onButtonTap" />
-            <Button text="chaining-with-promises" tap="onButtonTap" /> -->
+            <Button text="chaining-with-promises" tap="onButtonTap" />
             <Button text="chaining-with-animation-set" tap="onButtonTap" />
-            <!-- <Button text="multiple-views" tap="onButtonTap" />
+            <Button text="multiple-views" tap="onButtonTap" />
             <Button text="reusing" tap="onButtonTap" />
             <Button text="slide-in-effect" tap="onButtonTap" />
             <Button text="infinite" tap="onButtonTap" />
             <Button text="animation-curves" tap="onButtonTap" />
-            <Button text="css-animations" tap="onButtonTap" /> -->
+            <Button text="css-animations" tap="onButtonTap" /> 
         </StackLayout>
     </ScrollView>
 
diff --git a/e2e/animation/app/infinite/page.ts b/e2e/animation/app/infinite/page.ts
new file mode 100644
index 000000000..98b190c8a
--- /dev/null
+++ b/e2e/animation/app/infinite/page.ts
@@ -0,0 +1,28 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Animation } from "tns-core-modules/ui/animation";
+
+let view: View;
+let animationSet: Animation;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    animationSet = new Animation([{
+        target: view,
+        rotate: 360,
+        duration: 3000,
+        iterations: Number.POSITIVE_INFINITY
+    }]);
+    animationSet.play().catch((e) => {
+        console.log("Animation stopped!");
+    });
+}
+
+export function onReset(args: EventData) {
+    animationSet.cancel();
+    view.rotate = 0;
+}
diff --git a/e2e/animation/app/infinite/page.xml b/e2e/animation/app/infinite/page.xml
new file mode 100644
index 000000000..63b71b7f9
--- /dev/null
+++ b/e2e/animation/app/infinite/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Infinite" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/multiple-properties/page.ts b/e2e/animation/app/multiple-properties/page.ts
new file mode 100644
index 000000000..a6a3f3cd2
--- /dev/null
+++ b/e2e/animation/app/multiple-properties/page.ts
@@ -0,0 +1,28 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Color } from "tns-core-modules/color";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        backgroundColor: new Color("#3D5AFE"),
+        opacity: 0.5,
+        translate: {x: 100, y: 100},
+        rotate: 180,
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.backgroundColor = new Color("White");
+    view.opacity = 1;
+    view.translateX = 0;
+    view.translateY = 0;
+    view.rotate = 0;
+}
diff --git a/e2e/animation/app/multiple-properties/page.xml b/e2e/animation/app/multiple-properties/page.xml
new file mode 100644
index 000000000..187318956
--- /dev/null
+++ b/e2e/animation/app/multiple-properties/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Multiple Properties" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view" text="{N}" width="100" height="100" left="100" top="100" style.textAlignment="center" backgroundColor="White" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/multiple-views/page.ts b/e2e/animation/app/multiple-views/page.ts
new file mode 100644
index 000000000..e64d44bcd
--- /dev/null
+++ b/e2e/animation/app/multiple-views/page.ts
@@ -0,0 +1,62 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
+
+let view1: View;
+let view2: View;
+let view3: View;
+let view4: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view1 = page.getViewById<View>("view1");
+    view2 = page.getViewById<View>("view2");
+    view3 = page.getViewById<View>("view3");
+    view4 = page.getViewById<View>("view4");
+}
+
+export function onAnimate(args: EventData) {
+    const definitions = new Array<AnimationDefinition>();
+    definitions.push({
+        target: view1,
+        translate: { x: 200, y: 0 },
+        duration: 3000
+    });
+
+    definitions.push({
+        target: view2,
+        translate: { x: 0, y: 200 },
+        duration: 3000
+    });
+
+    definitions.push({
+        target: view3,
+        translate: { x: -200, y: 0 },
+        duration: 3000
+    });
+
+    definitions.push({
+        target: view4,
+        translate: { x: 0, y: -200 },
+        duration: 3000
+    });
+
+    const animationSet = new Animation(definitions);
+    animationSet.play().then(() => {
+        console.log("Animation finished");
+    })
+    .catch((e) => {
+        console.log(e.message);
+    });
+}
+
+export function onReset(args: EventData) {
+    view1.translateX = 0;
+    view1.translateY = 0;
+    view2.translateX = 0;
+    view2.translateY = 0;
+    view3.translateX = 0;
+    view3.translateY = 0;
+    view4.translateX = 0;
+    view4.translateY = 0;
+}
diff --git a/e2e/animation/app/multiple-views/page.xml b/e2e/animation/app/multiple-views/page.xml
new file mode 100644
index 000000000..364056d9d
--- /dev/null
+++ b/e2e/animation/app/multiple-views/page.xml
@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Multiple Views" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Label id="view1" text="{N}" width="100" height="100" left="0" top="0" style.textAlignment="center" backgroundColor="Red" style.fontSize="30" />
+      <Label id="view2" text="{N}" width="100" height="100" left="200" top="0" style.textAlignment="center" backgroundColor="Yellow" style.fontSize="30" />
+      <Label id="view3" text="{N}" width="100" height="100" left="200" top="200" style.textAlignment="center" backgroundColor="Green" style.fontSize="30" />
+      <Label id="view4" text="{N}" width="100" height="100" left="0" top="200" style.textAlignment="center" backgroundColor="Blue" style.fontSize="30" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/opacity/page.ts b/e2e/animation/app/opacity/page.ts
new file mode 100644
index 000000000..a85782503
--- /dev/null
+++ b/e2e/animation/app/opacity/page.ts
@@ -0,0 +1,20 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        opacity: 0,
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.opacity = 1.0;
+}
diff --git a/e2e/animation/app/opacity/page.xml b/e2e/animation/app/opacity/page.xml
new file mode 100644
index 000000000..be344ecfa
--- /dev/null
+++ b/e2e/animation/app/opacity/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Opacity"/>
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/res/icon_100x100.png b/e2e/animation/app/res/icon_100x100.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fc132a1bf67dc69665921b44b2321f670ad0988
GIT binary patch
literal 2764
zcmaJ@X;hMF8z#*qmvKqUoHW96DG^XG!3`C+5^`b6EKLv;RF(h*T*{>dMx88lG_*8r
z+{zlw$tlw*b($E<eN4qQHMi0vE6tV<+vfZ6^}Xl3@AKTxxv%S9p6fp675d^lHPsB&
z004ldw-?4=zLHj7Rb}~?`8XRdUp8^v133YVa1NKiA_H7V3?domO(R5*{mBFp|A>U_
z001bOQt^SDK&%fcj6t&^tom5-XiPa80B~^TF$rN&WDbx>j-b*VLGyKgfPhqzBWOPY
z3&k?s$P}tq9E%(fhr@@(MTH?rAZI6_0}mx9ppiKQAdePJXQOzIppU#L`F`~n0s?+?
z;Y2xtJ|z{1^#!^ySY#l=$`%|3g~5TlkXA5+?JndlOQ5yfhCuBg)=)4Mi9*<*pw__8
z4@e%3MG8mxV>~{`l3R`-3Wvi)K_FZ%*NSUn#b8B1U`Qkq0=0%%TZ82uU^bu5A@IO-
zw#gR;44ECqqB1#D1|7J{NFXv|IF2BBrk_fnF~8E%*`M1aZy1C}U_xM4(AAQ@IAXE?
z-<3xD>dof(lmE^4e-g9td?p#<Pi8Y>SYh&u3pZH}#YDNW$OI09g=a9LzjV=;!r(C2
z6b2LM=Jv5`K=b`nI*Gw$TYSV|u_$jkn?s<7k-agFAUTT_l}bXnVcd~$I|Rbj)pi#Q
z<_@=m*}?7HZ9NdSa5uQC8{!KV!w8F^k?EW-Skk{(+izl5<v?S~BV))cYAl)L!D7&W
zAInBjznzQCH~BteN#D)|{!J`Io(yF5a{ueHzZ}UGw7UH&UAgg9{A9XZ@hrKt*~AMY
z0Dy{vH^v3e>wkJaI2!M+_g7oJwo;JOj!_dd4Oo+svekdR|0QqD<IShdwT}Aznd86R
zW9L1CotMxiMM52+)(#m+%`l{5of9zE!>M8&C0*BLH`EtXRt~IDy7(&Yy_8y=H5kjC
z9H_JJLP{h`w~XfA9<zT@aP#$?@#*8lyPb2J63Rv_CoD%TpFEg+U{Y6<dj0(Mb1w`g
zx3=C(l)fw0&4?Fkhsy|?BDP0t)tsY@4&1w$J-S(_r<!U$=4LcWWSudOJ<?;7TjHAx
zRZUO9=I_aWV&SeBp_xk6QE7x$=%wr6CTofUT>3x?$6Ww-!Y9^SS!*rrL8MMUFi>qW
zA8Eq1T9=l3-3c%bHJ|KKE((1*kw3xF%V^4<kQ6Sx^9iswO7~R|&*2SAl`;I2c_oc$
z*1s&=L3c;~y@|KvS6+jg+ZtJLq#H~#3D#{B43{n%ZKW6J(9(Uy!*;IS6Pb#*;w#N>
zhgvKbOfI!fpZ%?@j()uC@{K=G!PSPfV>=dnU*?cIE47SV;q?N_+rXmRqwoHBwd7s&
zMAY{~m~3s4J!AF*!YD@=B#mpWopoLa0HpSZ0EsOF2k&V+zWdcvz3+@i2`_4fXz%yW
zOj7InY)4>{--=J<qaZ1tR+BgQY7C<AW+i37+5nvpQ@VHjNv9)Qc%%MV$65FCCUpAW
zW^rTNPoEql-5WUD7G<)ilL&_BN8Ql244u*UhlU)U*0gino;F>pTVFk3B2q}KJl2u+
zGT3|v0FwtRDgR-ogADPq8UDIAF&qhdliuK_m~5_;sXMrDWYf8y(i^IX<(}+$;FyOR
zTw9<Eu;>ZKf-Oafe^ticEf$VFNKw!%JQ1#^=+%Hz5A6R*?`Zp9aFHikk#eyv1fUH@
zR<)^`_`vyVz_JA4vdshPoo%9=_QtlCI59=GPZ9Rdc%>4tLUK^E8850e6qMWZFDGj#
zi*|h{cxF1E$LqAsyUmypN+V?r5;I1zWTk|A$5yn<SU@wKm$t9V^BJlomr04T9zfNf
z<7@>lZmkU;1}yfRDQGr3tQ$O&iCFd?E8ZC3s!jt2n9j6GBZ3rzRzlE&$-hd5H-oj;
zffEL~V{hw7DE9M>MGp&9h>v}CZmXz#bw90r^5TiP>(n6hhE_8}dylJb1&Qw6OZA81
z^<M}s{O*hbwkwE9N~*^32i})Gl|n|=R1?@}v!L<*D@O;4>moc=l*CgG8?tpWN1Fsa
z*A^+Rs;2?L%Q;iOaTWYThgT9frdrrSP56&%@268STdusIv_5!_iYdv)V2$T{&9TP)
zXcI~{UBg0LAN~woOz5;L;<E)6#tTz7cb``Cki>?5&~n_8GOa!_^FvW*pLG}UE+s?>
z`+Q28Dm)f)2vbvtr>mXx&>EWcli(q*1k=Ao4HQ@vUA4NXqwBj!xFv}w8f;GvVJ@q6
zlsm`EX5YC)8$1?y1e9Xhb;vSzQGKuVzQ4!w_9|DAV{;c)s7|l76j5;?lGfd0&!38u
zj-qrQ*0o?nr)=BJgAF!atA<AIqiIYXItcgmvF1}0XoY^4R<v)2Irr<Fzn)tyI%SF~
zJ`h#fFbVLJp17Yoep}*}<|rOMaZzb)!2RScCWk7=mvF{GQ@G3h`{VZ(WW>5`z95-x
z3)T&yC@xR>FV4P!`n)ecwJ1H)-q?Ha_fFIKNrA4%a6pbNUuByLc4&<RCgP%5?c+w7
zo8f$w=5x0b(a});<)q$FS<f2S;CSU)VzuO;`X`wQO&JL7_1K{}V9B|+g#hANNtEK<
zM+|#WPL~3@Cj3#4Ej#HrO{NgU0eIEn)On`0^<C#2`t7eC_AN9*i(`V&*-3*Zvy;~~
zjlYHq@jevg%&=RPg}alyLqIgyl)ZdX!T>C<TK%l(zz+@lM?Zzih7(F3Da)rzJ-gCw
zEigkDJZfVcGcQK?hsqdLk}b~J%l8B8VFLMF8oo=ECT2<2AK*TnsM@#8LTlDNguU6h
zKi=m((QwcA26k@*4Qh>)HEBbJ`0tmVSCBlrEclBr7?@-EEmj5zDUpTqbgi4?9eEm;
zdi0fA&I|OF(w=oMs5m`kiAmsC3*|?_sB-Qt5_o0|az4{=dl|fMq(<mq7<W10mC;s#
z;fzJ@EJ!?s7YDckD<Y3%bXioF39sp8cr97zhr}fAzFHF3Ta`g@=zG0IG^kbnB$_2Y
zu>re#?0eAk<nO#Jz0emAkuB3^hNqA%d`|w}#imPKjej6nb!R|M)@K{1HhOK&a?hR5
z|M|^@HQ<%hj`^(YP_@gCn@n4EaMHz`8ydttJ0Q5(>vuGM@pU=yn1iEr<xr?QmA8GT
z@ndDr5vy3SnZ}`wS56NnpHh>bUDbsI#Q)sr^4&%E<>sCt^%Lig_wK(|XlMVjJKPh=
z#20#Wgmw2lyzawuxRxS4z_VN1W-_vYSA46Z)aZjc6!2_W>~{)stZMcD(%T(}x#}94
F@*l1Fq_Y43

literal 0
HcmV?d00001

diff --git a/e2e/animation/app/reusing/page.ts b/e2e/animation/app/reusing/page.ts
new file mode 100644
index 000000000..61e02417f
--- /dev/null
+++ b/e2e/animation/app/reusing/page.ts
@@ -0,0 +1,31 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    const animation1 = view.createAnimation({ opacity: 0 });
+    const animation2 = view.createAnimation({ opacity: 1 });
+
+    animation1.play()
+        .then(() => animation2.play())
+        .then(() => animation1.play())
+        .then(() => animation2.play())
+        .then(() => animation1.play())
+        .then(() => animation2.play())
+        .then(() => {
+            console.log("Animation finished");
+        })
+        .catch((e) => {
+            console.log(e.message);
+        });
+}
+
+export function onReset(args: EventData) {
+    view.opacity = 1;
+}
diff --git a/e2e/animation/app/reusing/page.xml b/e2e/animation/app/reusing/page.xml
new file mode 100644
index 000000000..e343cd611
--- /dev/null
+++ b/e2e/animation/app/reusing/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Reusing" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset"/>
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+  
+</Page>
diff --git a/e2e/animation/app/rotate/page.css b/e2e/animation/app/rotate/page.css
new file mode 100644
index 000000000..c94b12d14
--- /dev/null
+++ b/e2e/animation/app/rotate/page.css
@@ -0,0 +1,3 @@
+.img {
+    color: red;
+}
\ No newline at end of file
diff --git a/e2e/animation/app/rotate/page.ts b/e2e/animation/app/rotate/page.ts
new file mode 100644
index 000000000..d20882e41
--- /dev/null
+++ b/e2e/animation/app/rotate/page.ts
@@ -0,0 +1,20 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        rotate: 360,
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.rotate = 0;
+}
diff --git a/e2e/animation/app/rotate/page.xml b/e2e/animation/app/rotate/page.xml
new file mode 100644
index 000000000..db7654c9d
--- /dev/null
+++ b/e2e/animation/app/rotate/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Rotate" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/scale/page.ts b/e2e/animation/app/scale/page.ts
new file mode 100644
index 000000000..11a8f8ef9
--- /dev/null
+++ b/e2e/animation/app/scale/page.ts
@@ -0,0 +1,21 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        scale: { x: 2, y: 2},
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.scaleX = 1;
+    view.scaleY = 1;
+}
diff --git a/e2e/animation/app/scale/page.xml b/e2e/animation/app/scale/page.xml
new file mode 100644
index 000000000..758d03d4c
--- /dev/null
+++ b/e2e/animation/app/scale/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Scale" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/slide-in-effect/page.ts b/e2e/animation/app/slide-in-effect/page.ts
new file mode 100644
index 000000000..8b1957ebe
--- /dev/null
+++ b/e2e/animation/app/slide-in-effect/page.ts
@@ -0,0 +1,32 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+import { Layout } from "tns-core-modules/ui/layouts/layout";
+import { Image } from "tns-core-modules/ui/image";
+
+let wrapLayout: Layout;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    wrapLayout = page.getViewById<Layout>("wrapLayout");
+}
+
+export function onAddItem(args: EventData) {
+    var item = new Image();
+    item.src = "~/res/icon_100x100.png";
+    item.width = 90;
+    item.height = 90;
+    item.style.margin = "5,5,5,5";
+    item.translateX = -300;
+    item.opacity = 0;
+    item.on("loaded", (args: EventData) => {
+        (<View>args.object).animate({translate: { x: 0, y: 0 }, opacity: 1});
+    });
+    wrapLayout.addChild(item);
+}
+
+export function onClear(args: EventData) {
+    var i = wrapLayout.getChildrenCount() - 1;
+    while (i >= 0) {
+        wrapLayout.removeChild(wrapLayout.getChildAt(i--));
+    }
+}
diff --git a/e2e/animation/app/slide-in-effect/page.xml b/e2e/animation/app/slide-in-effect/page.xml
new file mode 100644
index 000000000..6f371b879
--- /dev/null
+++ b/e2e/animation/app/slide-in-effect/page.xml
@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Slide in Effect" />
+
+  <StackLayout>
+    <Button text="Add Item" tap="onAddItem" />
+    <Button text="Clear" tap="onClear" />
+    <WrapLayout id="wrapLayout" width="305" height="305" clipToBounds="true" backgroundColor="LightGray" padding="5,0,5,5" />
+  </StackLayout>
+
+</Page>
diff --git a/e2e/animation/app/translate/page.ts b/e2e/animation/app/translate/page.ts
new file mode 100644
index 000000000..424e7f201
--- /dev/null
+++ b/e2e/animation/app/translate/page.ts
@@ -0,0 +1,21 @@
+import { EventData, Page } from "tns-core-modules/ui/page";
+import { View } from "tns-core-modules/ui/core/view";
+
+let view: View;
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    view = page.getViewById<View>("view");
+}
+
+export function onAnimate(args: EventData) {
+    view.animate({
+        translate: { x: 100, y: 100},
+        duration: 3000
+    });
+}
+
+export function onReset(args: EventData) {
+    view.translateX = 0;
+    view.translateY = 0;
+}
diff --git a/e2e/animation/app/translate/page.xml b/e2e/animation/app/translate/page.xml
new file mode 100644
index 000000000..53fee4996
--- /dev/null
+++ b/e2e/animation/app/translate/page.xml
@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+
+  <ActionBar title="Translate" />
+
+  <StackLayout>
+    <Button text="Animate" tap="onAnimate" />
+    <Button text="Reset" tap="onReset" />
+    <AbsoluteLayout width="300" height="300" clipToBounds="true" backgroundColor="LightGray">
+      <Image id="view" src="~/res/icon_100x100.png" width="100" height="100" left="100" top="100" />
+    </AbsoluteLayout>
+  </StackLayout>
+
+</Page>