--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -221,16 +221,18 @@ class AnimationInspector {
     const animations =
       selection.isConnected() && selection.isElementNode()
       ? await this.animationsFront.getAnimationPlayersForNode(selection.nodeFront)
       : [];
 
     if (!this.animations || !isAllAnimationEqual(animations, this.animations)) {
       this.inspector.store.dispatch(updateAnimations(animations));
       this.animations = animations;
+      // If number of displayed animations is one, we select the animation automatically.
+      this.selectAnimation(animations.length === 1 ? animations[0] : null);
     }
 
     done();
   }
 
   selectAnimation(animation) {
     this.inspector.store.dispatch(updateSelectedAnimation(animation));
   }

--- a/devtools/client/inspector/animation/components/AnimationItem.js
+++ b/devtools/client/inspector/animation/components/AnimationItem.js
@@ -34,18 +34,20 @@ class AnimationItem extends PureComponen
 
     this.state = {
       isSelected: false,
     };
   }
 
   componentWillReceiveProps(nextProps) {
     const { animation } = this.props;
+
     this.setState({
-      isSelected: animation.actorID === nextProps.selectedAnimation.actorID
+      isSelected: nextProps.selectedAnimation &&
+                  animation.actorID === nextProps.selectedAnimation.actorID
     });
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     return this.state.isSelected !== nextState.isSelected ||
            this.props.animation !== nextProps.animation ||
            this.props.timeScale !== nextProps.timeScale;
   }

--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -13,16 +13,17 @@ const AnimationDetailContainer = createF
 const AnimationListContainer = createFactory(require("./AnimationListContainer"));
 const NoAnimationPanel = createFactory(require("./NoAnimationPanel"));
 const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+      detailVisibility: PropTypes.bool.isRequired,
       emitEventForTest: PropTypes.func.isRequired,
       getAnimatedPropertyMap: PropTypes.func.isRequired,
       getNodeFromActor: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       selectAnimation: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
@@ -32,30 +33,32 @@ class App extends PureComponent {
 
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.animations.length !== 0 || nextProps.animations.length !== 0;
   }
 
   render() {
     const {
       animations,
+      detailVisibility,
       emitEventForTest,
       getAnimatedPropertyMap,
       getNodeFromActor,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       selectAnimation,
       setSelectedNode,
       simulateAnimation,
       toggleElementPicker,
     } = this.props;
 
     return dom.div(
       {
-        id: "animation-container"
+        id: "animation-container",
+        className: detailVisibility ? "animation-detail-visible" : "",
       },
       animations.length ?
       SplitBox({
         className: "animation-container-splitter",
         endPanel: AnimationDetailContainer(
           {
             getAnimatedPropertyMap,
           }
@@ -85,13 +88,14 @@ class App extends PureComponent {
         }
       )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
-    animations: state.animations.animations
+    animations: state.animations.animations,
+    detailVisibility: state.animations.detailVisibility,
   };
 };
 
 module.exports = connect(mapStateToProps)(App);

--- a/devtools/client/inspector/animation/reducers/animations.js
+++ b/devtools/client/inspector/animation/reducers/animations.js
@@ -8,39 +8,43 @@ const {
   UPDATE_ANIMATIONS,
   UPDATE_ELEMENT_PICKER_ENABLED,
   UPDATE_SELECTED_ANIMATION,
   UPDATE_SIDEBAR_SIZE,
 } = require("../actions/index");
 
 const INITIAL_STATE = {
   animations: [],
+  detailVisibility: false,
   elementPickerEnabled: false,
   selectedAnimation: null,
   sidebarSize: {
     height: 0,
     width: 0,
   },
 };
 
 const reducers = {
   [UPDATE_ANIMATIONS](state, { animations }) {
     return Object.assign({}, state, {
-      animations
+      animations,
     });
   },
 
   [UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
     return Object.assign({}, state, {
       elementPickerEnabled
     });
   },
 
   [UPDATE_SELECTED_ANIMATION](state, { selectedAnimation }) {
+    const detailVisibility = !!selectedAnimation;
+
     return Object.assign({}, state, {
+      detailVisibility,
       selectedAnimation
     });
   },
 
   [UPDATE_SIDEBAR_SIZE](state, { sidebarSize }) {
     return Object.assign({}, state, {
       sidebarSize
     });

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -24,16 +24,20 @@
 #animation-container {
   height: 100%;
 }
 
 #animation-container .uncontrolled {
   overflow: hidden;
 }
 
+#animation-container:not(.animation-detail-visible) .controlled {
+  display: none;
+}
+
 /* Animation List Container */
 .animation-list-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   width: 100%;
 }