diff --git a/Source/Widgets/Balloon/Balloon.css b/Source/Widgets/Balloon/Balloon.css
index 52d123b86e72..54fd6fda81f2 100644
--- a/Source/Widgets/Balloon/Balloon.css
+++ b/Source/Widgets/Balloon/Balloon.css
@@ -1,3 +1,19 @@
+.cesium-balloon-container {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 0.2s, opacity 0.2s ease-in;
+    -webkit-transition: visibility 0s 0.2s, opacity 0.2s ease-in;
+    -moz-transition: visibility 0s 0.2s, opacity 0.2s ease-in;
+}
+
+.cesium-balloon-container-visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.2s ease-out;
+    -webkit-transition: opacity 0.2s ease-out;
+    -moz-transition: opacity 0.2s ease-out;
+}
+
 .cesium-balloon-wrapper {
     position: absolute;
     font-size: 10pt;
@@ -20,6 +36,11 @@
     position: absolute;
     overflow: hidden;
     z-index: 2;
+    visibility: hidden;
+}
+
+.cesium-balloon-arrow-container-show {
+    visibility: visible;
 }
 
 .cesium-balloon-arrow-container-downup {
@@ -64,30 +85,6 @@
     margin-top: 5px;
 }
 
-.cesium-balloon-wrapper-visible {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s linear;
-    -webkit-transition: opacity 0.2s linear;
-    -moz-transition: opacity 0.2s linear;
-}
-
-.cesium-balloon-wrapper-hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s 0.2s, opacity 0.2s linear;
-    -webkit-transition: visibility 0s 0.2s, opacity 0.2s linear;
-    -moz-transition: visibility 0s 0.2s, opacity 0.2s linear;
-}
-
-.cesium-balloon-arrow-show {
-    visibility: visible;
-}
-
-.cesium-balloon-arrow-hide {
-    visibility: hidden;
-}
-
 .cesium-balloon-close {
     position: absolute;
     top: 5px;
diff --git a/Source/Widgets/Balloon/Balloon.js b/Source/Widgets/Balloon/Balloon.js
index 05eb14d9686f..ef1866bcc555 100644
--- a/Source/Widgets/Balloon/Balloon.js
+++ b/Source/Widgets/Balloon/Balloon.js
@@ -37,7 +37,8 @@ define([
         container = getElement(container);
 
         this._container = container;
-        container.setAttribute('data-bind', 'css: { "cesium-balloon-wrapper-visible" : showBalloon, "cesium-balloon-wrapper-hidden" : !showBalloon }');
+        container.setAttribute('data-bind', 'css: { "cesium-balloon-container" : true, "cesium-balloon-container-visible" : showBalloon }');
+
         var el = document.createElement('div');
         this._element = el;
         el.className = 'cesium-balloon-wrapper';
@@ -60,7 +61,7 @@ define([
         var arrowContainer = document.createElement('div');
         arrowContainer.className = 'cesium-balloon-arrow-container';
         arrowContainer.setAttribute('data-bind', 'css: { "cesium-balloon-arrow-container-downup" : _down || _up, "cesium-balloon-arrow-container-leftright" : _left || _right,\
-                "cesium-balloon-arrow-show" : showArrow, "cesium-balloon-arrow-hide" : !showArrow},\
+                "cesium-balloon-arrow-container-show" : showArrow },\
                 style: { "bottom" : _arrowY, "left" : _arrowX}');
         var arrow = document.createElement('div');
         arrow.className = 'cesium-balloon-arrow';
diff --git a/Source/Widgets/Balloon/BalloonViewModel.js b/Source/Widgets/Balloon/BalloonViewModel.js
index 6355d1faef04..c7a061623c97 100644
--- a/Source/Widgets/Balloon/BalloonViewModel.js
+++ b/Source/Widgets/Balloon/BalloonViewModel.js
@@ -162,7 +162,7 @@ define([
          *
          * @type {Number}
          */
-        this._positionX = '0';
+        this._positionX = '-1000px';
 
         /**
          * The y screen position of the balloon.
@@ -202,7 +202,7 @@ define([
          *
          * @type {Boolean}
          */
-        this.showArrow = true;
+        this.showArrow = false;
 
         /**
          * True of the balloon arrow should be arrowing down.