diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index 432fbd5baaef5..f48ef007115dd 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -5,10 +5,12 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { Slot } from 'react-slot-fill';
 import { partial } from 'lodash';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 /**
  * WordPress dependencies
  */
+import { Children } from 'element';
 import Toolbar from 'components/toolbar';
 
 /**
@@ -33,6 +35,11 @@ import {
 	isTypingInBlock,
 } from '../../selectors';
 
+function FirstChild( { children } ) {
+	const childrenArray = Children.toArray( children );
+	return childrenArray[ 0 ] || null;
+}
+
 class VisualEditorBlock extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
@@ -200,18 +207,27 @@ class VisualEditorBlock extends wp.element.Component {
 			>
 				{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } /> }
 				{ showUI &&
-					<div className="editor-visual-editor__block-controls">
-						<BlockSwitcher uid={ block.uid } />
-						{ !! settings.controls && (
-							<Toolbar
-								controls={ settings.controls.map( ( control ) => ( {
-									...control,
-									onClick: () => control.onClick( block.attributes, this.setAttributes ),
-									isActive: control.isActive ? control.isActive( block.attributes ) : false,
-								} ) ) } />
-						) }
-						<Slot name="Formatting.Toolbar" />
-					</div>
+					<CSSTransitionGroup
+						transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }
+						transitionAppear={ true }
+						transitionAppearTimeout={ 100 }
+						transitionEnter={ false }
+						transitionLeave={ false }
+						component={ FirstChild }
+					>
+						<div className="editor-visual-editor__block-controls">
+							<BlockSwitcher uid={ block.uid } />
+							{ !! settings.controls && (
+								<Toolbar
+									controls={ settings.controls.map( ( control ) => ( {
+										...control,
+										onClick: () => control.onClick( block.attributes, this.setAttributes ),
+										isActive: control.isActive ? control.isActive( block.attributes ) : false,
+									} ) ) } />
+							) }
+							<Slot name="Formatting.Toolbar" />
+						</div>
+					</CSSTransitionGroup>
 				}
 				<div onKeyPress={ this.maybeStartTyping }>
 					<BlockEdit
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 90b2d7940af2a..e0f579cb2a37f 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -72,7 +72,6 @@
 }
 
 .editor-visual-editor__block-controls {
-	@include animate_fade;
 	display: flex;
 	position: sticky;
 	z-index: z-index( '.editor-visual-editor__block-controls' );
@@ -87,6 +86,10 @@
 	@include break-medium() {
 		top: $header-height + $admin-bar-height + $item-spacing;
 	}
+
+	&.is-appearing-active {
+		@include animate_fade;
+	}
 }
 
 .editor-visual-editor__block-controls + div {
diff --git a/package.json b/package.json
index 86aeed2092482..5121aaa1e2ef4 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
     "react-slot-fill": "^1.0.0-alpha.11",
+    "react-transition-group": "^1.1.3",
     "redux": "^3.6.0",
     "uuid": "^3.0.1"
   }