diff --git a/core/css.js b/core/css.js
index 3a1958f5f..662579a23 100644
--- a/core/css.js
+++ b/core/css.js
@@ -164,6 +164,11 @@ Blockly.Css.CONTENT = [
     'z-index: 50;', /* Display below toolbox, but above everything else. */
   '}',
 
+  '.blocklyBlockCanvas.blocklyCanvasTransitioning,',
+  '.blocklyBubbleCanvas.blocklyCanvasTransitioning {',
+    'transition: transform .5s;',
+  '}',
+
   '.blocklyTooltipDiv {',
     'background-color: #ffffc7;',
     'border: 1px solid #ddc;',
diff --git a/core/workspace_svg.js b/core/workspace_svg.js
index ce6e91174..6daf03c51 100644
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -1595,6 +1595,32 @@ Blockly.WorkspaceSvg.prototype.zoomToFit = function() {
   this.scrollCenter();
 };
 
+/**
+ * Add a transition class to the block and bubble canvas, to animate any
+ * transform changes.
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.beginCanvasTransition = function() {
+  Blockly.utils.addClass(
+      /** @type {!SVGElement} */ this.svgBlockCanvas_,
+      'blocklyCanvasTransitioning');
+  Blockly.utils.addClass(
+      /** @type {!SVGElement} */ this.svgBubbleCanvas_,
+      'blocklyCanvasTransitioning');
+};
+
+/**
+ * Remove transition class from the block and bubble canvas.
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.endCanvasTransition = function() {
+  Blockly.utils.removeClass(
+      /** @type {!SVGElement} */ this.svgBlockCanvas_,
+      'blocklyCanvasTransitioning');
+  Blockly.utils.removeClass(
+      /** @type {!SVGElement} */ this.svgBubbleCanvas_,
+      'blocklyCanvasTransitioning');
+};
 /**
  * Center the workspace.
  */
diff --git a/core/zoom_controls.js b/core/zoom_controls.js
index 40908a99b..ad09fbf04 100644
--- a/core/zoom_controls.js
+++ b/core/zoom_controls.js
@@ -302,7 +302,11 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
   Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
     ws.markFocused();
     ws.setScale(ws.options.zoomOptions.startScale);
+    ws.beginCanvasTransition();
     ws.scrollCenter();
+    setTimeout(function() {
+      ws.endCanvasTransition();
+    }, 500);
     Blockly.Touch.clearTouchIdentifier();  // Don't block future drags.
     e.stopPropagation();  // Don't start a workspace scroll.
     e.preventDefault();  // Stop double-clicking from selecting text.