diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index a81afbb6c..4c4975db6 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -30,58 +30,64 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
       class="ant-upload-list-item ant-upload-list-item-done">
       <div
         class="ant-upload-list-item-info">
-        <i
-          class="anticon anticon-paper-clip" />
-        <a
-          class="ant-upload-list-item-name"
-          href="http://www.baidu.com/xxx.png"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="xxx.png">
-          xxx.png
-        </a>
-        <i
-          class="anticon anticon-cross"
-          title="删除文件" />
+        <span>
+          <i
+            class="anticon anticon-paper-clip" />
+          <a
+            class="ant-upload-list-item-name"
+            href="http://www.baidu.com/xxx.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="xxx.png">
+            xxx.png
+          </a>
+        </span>
       </div>
+      <i
+        class="anticon anticon-cross"
+        title="删除文件" />
     </div>
     <div
       class="ant-upload-list-item ant-upload-list-item-done">
       <div
         class="ant-upload-list-item-info">
-        <i
-          class="anticon anticon-paper-clip" />
-        <a
-          class="ant-upload-list-item-name"
-          href="http://www.baidu.com/yyy.png"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="yyy.png">
-          yyy.png
-        </a>
-        <i
-          class="anticon anticon-cross"
-          title="删除文件" />
+        <span>
+          <i
+            class="anticon anticon-paper-clip" />
+          <a
+            class="ant-upload-list-item-name"
+            href="http://www.baidu.com/yyy.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="yyy.png">
+            yyy.png
+          </a>
+        </span>
       </div>
+      <i
+        class="anticon anticon-cross"
+        title="删除文件" />
     </div>
     <div
       class="ant-upload-list-item ant-upload-list-item-error">
       <div
         class="ant-upload-list-item-info">
-        <i
-          class="anticon anticon-paper-clip" />
-        <a
-          class="ant-upload-list-item-name"
-          href="http://www.baidu.com/zzz.png"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="zzz.png">
-          zzz.png
-        </a>
-        <i
-          class="anticon anticon-cross"
-          title="删除文件" />
+        <span>
+          <i
+            class="anticon anticon-paper-clip" />
+          <a
+            class="ant-upload-list-item-name"
+            href="http://www.baidu.com/zzz.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="zzz.png">
+            zzz.png
+          </a>
+        </span>
       </div>
+      <i
+        class="anticon anticon-cross"
+        title="删除文件" />
     </div>
   </div>
 </span>
@@ -110,20 +116,22 @@ exports[`test renders ./components/upload/demo/fileList.md correctly 1`] = `
       class="ant-upload-list-item ant-upload-list-item-done">
       <div
         class="ant-upload-list-item-info">
-        <i
-          class="anticon anticon-paper-clip" />
-        <a
-          class="ant-upload-list-item-name"
-          href="http://www.baidu.com/xxx.png"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="xxx.png">
-          xxx.png
-        </a>
-        <i
-          class="anticon anticon-cross"
-          title="删除文件" />
+        <span>
+          <i
+            class="anticon anticon-paper-clip" />
+          <a
+            class="ant-upload-list-item-name"
+            href="http://www.baidu.com/xxx.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="xxx.png">
+            xxx.png
+          </a>
+        </span>
       </div>
+      <i
+        class="anticon anticon-cross"
+        title="删除文件" />
     </div>
   </div>
 </span>
@@ -140,38 +148,40 @@ exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
         class="ant-upload-list-item ant-upload-list-item-done">
         <div
           class="ant-upload-list-item-info">
-          <a
-            class="ant-upload-list-item-thumbnail"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank">
-            <img
-              alt="xxx.png"
-              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-          </a>
-          <a
-            class="ant-upload-list-item-name"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="xxx.png">
-            xxx.png
-          </a>
-          <span
-            class="ant-upload-list-item-actions">
+          <span>
             <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank">
+              <img
+                alt="xxx.png"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
-              title="预览文件">
-              <i
-                class="anticon anticon-eye-o" />
+              title="xxx.png">
+              xxx.png
             </a>
-            <i
-              class="anticon anticon-delete"
-              title="删除文件" />
           </span>
         </div>
+        <span
+          class="ant-upload-list-item-actions">
+          <a
+            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="预览文件">
+            <i
+              class="anticon anticon-eye-o" />
+          </a>
+          <i
+            class="anticon anticon-delete"
+            title="删除文件" />
+        </span>
       </div>
     </div>
     <div
@@ -194,53 +204,57 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
         class="ant-upload-list-item ant-upload-list-item-done">
         <div
           class="ant-upload-list-item-info">
-          <a
-            class="ant-upload-list-item-thumbnail"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank">
-            <img
-              alt="xxx.png"
-              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-          </a>
-          <a
-            class="ant-upload-list-item-name"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="xxx.png">
-            xxx.png
-          </a>
-          <i
-            class="anticon anticon-cross"
-            title="删除文件" />
+          <span>
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank">
+              <img
+                alt="xxx.png"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="xxx.png">
+              xxx.png
+            </a>
+          </span>
         </div>
+        <i
+          class="anticon anticon-cross"
+          title="删除文件" />
       </div>
       <div
         class="ant-upload-list-item ant-upload-list-item-done">
         <div
           class="ant-upload-list-item-info">
-          <a
-            class="ant-upload-list-item-thumbnail"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank">
-            <img
-              alt="yyy.png"
-              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-          </a>
-          <a
-            class="ant-upload-list-item-name"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="yyy.png">
-            yyy.png
-          </a>
-          <i
-            class="anticon anticon-cross"
-            title="删除文件" />
+          <span>
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank">
+              <img
+                alt="yyy.png"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="yyy.png">
+              yyy.png
+            </a>
+          </span>
         </div>
+        <i
+          class="anticon anticon-cross"
+          title="删除文件" />
       </div>
     </div>
   </span>
@@ -257,53 +271,57 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
         class="ant-upload-list-item ant-upload-list-item-done">
         <div
           class="ant-upload-list-item-info">
-          <a
-            class="ant-upload-list-item-thumbnail"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank">
-            <img
-              alt="xxx.png"
-              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-          </a>
-          <a
-            class="ant-upload-list-item-name"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="xxx.png">
-            xxx.png
-          </a>
-          <i
-            class="anticon anticon-cross"
-            title="删除文件" />
+          <span>
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank">
+              <img
+                alt="xxx.png"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="xxx.png">
+              xxx.png
+            </a>
+          </span>
         </div>
+        <i
+          class="anticon anticon-cross"
+          title="删除文件" />
       </div>
       <div
         class="ant-upload-list-item ant-upload-list-item-done">
         <div
           class="ant-upload-list-item-info">
-          <a
-            class="ant-upload-list-item-thumbnail"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank">
-            <img
-              alt="yyy.png"
-              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
-          </a>
-          <a
-            class="ant-upload-list-item-name"
-            href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-            rel="noopener noreferrer"
-            target="_blank"
-            title="yyy.png">
-            yyy.png
-          </a>
-          <i
-            class="anticon anticon-cross"
-            title="删除文件" />
+          <span>
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank">
+              <img
+                alt="yyy.png"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="yyy.png">
+              yyy.png
+            </a>
+          </span>
         </div>
+        <i
+          class="anticon anticon-cross"
+          title="删除文件" />
       </div>
     </div>
   </span>
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index 27ea5318b..d8454a2ae 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -65,8 +65,14 @@ ReactDOM.render(
 ````css
 /* tile uploaded pictures */
 .upload-list-inline .ant-upload-list-item {
-  display: inline-block;
+  float: left;
   width: 200px;
   margin-right: 8px;
 }
+.upload-list-inline .ant-upload-animate-enter {
+  animation-name: uploadAnimateInlineIn;
+}
+.upload-list-inline .ant-upload-animate-leave {
+  animation-name: uploadAnimateInlineOut;
+}
 ````
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index a941fe653..8917cc7ab 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -118,6 +118,7 @@
     margin-top: 8px;
     font-size: @font-size-base;
     position: relative;
+    height: 22px;
 
     &-name {
       overflow: hidden;
@@ -129,7 +130,6 @@
     }
 
     &-info {
-      height: 22px;
       line-height: 22px;
       padding: 0 12px 0 4px;
       transition: background-color .3s;
@@ -141,19 +141,20 @@
         position: absolute;
         top: 6px;
       }
+    }
 
-      .@{iconfont-css-prefix}-cross {
-        .iconfont-size-under-12px(10px);
-        transition: all .3s;
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        right: 4px;
-        color: @text-color-secondary;
-        line-height: 22px;
-        &:hover {
-          color: @text-color;
-        }
+    .@{iconfont-css-prefix}-cross {
+      .iconfont-size-under-12px(10px);
+      transition: all .3s;
+      opacity: 0;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 4px;
+      color: @text-color-secondary;
+      line-height: 22px;
+      &:hover {
+        color: @text-color;
       }
     }
 
@@ -173,7 +174,7 @@
 
     &-error .@{iconfont-css-prefix}-cross {
       opacity: 1;
-      color: @error-color!important;
+      color: @error-color !important;
     }
 
     &-progress {
@@ -272,7 +273,7 @@
     display: inline;
 
     .@{upload-item} {
-      display: inline-block;
+      float: left;
       width: @upload-pictrue-card-size;
       height: @upload-pictrue-card-size;
       margin: 0 8px 8px 0;
@@ -288,35 +289,14 @@
         z-index: 1;
         background-color: rgba(0, 0, 0, 0.5);
         transition: all .3s;
-        opacity: 0;
         width: 100%;
         height: 100%;
       }
 
-      .@{iconfont-css-prefix}-eye-o,
-      .@{iconfont-css-prefix}-delete {
-        z-index: 10;
-        transition: all .3;
-        cursor: pointer;
-        font-size: 16px;
-        width: 16px;
-        color: @text-color-dark;
-        opacity: 0;
-        margin: 0 4px;
-        &:hover {
-          color: #fff;
-        }
-      }
-
       &:hover {
         &:before {
           opacity: 1;
         }
-
-        .@{iconfont-css-prefix}-eye-o,
-        .@{iconfont-css-prefix}-delete {
-          opacity: 1;
-        }
       }
     }
 
@@ -327,6 +307,27 @@
       transform: translate(-50%, -50%);
       z-index: 10;
       white-space: nowrap;
+      opacity: 0;
+      transition: all .3s;
+
+      .@{iconfont-css-prefix}-eye-o,
+      .@{iconfont-css-prefix}-delete {
+        z-index: 10;
+        transition: all .3s;
+        cursor: pointer;
+        font-size: 16px;
+        width: 16px;
+        color: @text-color-dark;
+        margin: 0 4px;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+
+    .@{upload-item}-info:hover + .@{upload-item}-actions,
+    .@{upload-item}-actions:hover {
+      opacity: 1;
     }
 
     .@{upload-item}-thumbnail,
@@ -371,25 +372,65 @@
     font-weight: bold;
   }
 
-  .@{upload-prefix-cls}-margin-top-enter {
-    animation: uploadMarginTopIn .3s @ease-in-out-circ;
+  .@{upload-prefix-cls}-animate-enter,
+  .@{upload-prefix-cls}-animate-leave,
+  .@{upload-prefix-cls}-animate-inline-enter,
+  .@{upload-prefix-cls}-animate-inline-leave {
+    animation-duration: .3s;
+    animation-fill-mode: @ease-in-out-circ;
   }
 
-  .@{upload-prefix-cls}-margin-top-leave {
-    animation: uploadMarginTopOut .3s @ease-in-out-circ;
+  .@{upload-prefix-cls}-animate-enter {
+    animation-name: uploadAnimateIn;
+  }
+
+  .@{upload-prefix-cls}-animate-leave {
+    animation-name: uploadAnimateOut;
+  }
+
+  .@{upload-prefix-cls}-animate-inline-enter {
+    animation-name: uploadAnimateInlineIn;
+  }
+
+  .@{upload-prefix-cls}-animate-inline-leave {
+    animation-name: uploadAnimateInlineOut;
   }
 }
 
-@keyframes uploadMarginTopIn {
+@keyframes uploadAnimateIn {
   from {
-    margin-top: -25px;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+  }
+}
+
+@keyframes uploadAnimateOut {
+  to {
+    height: 0;
+    margin: 0;
+    padding: 0;
     opacity: 0;
   }
 }
 
-@keyframes uploadMarginTopOut {
+@keyframes uploadAnimateInlineIn {
+  from {
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+  }
+}
+
+@keyframes uploadAnimateInlineOut {
   to {
-    margin-top: -25px;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
     opacity: 0;
   }
 }
diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx
index fff431606..fb87f4ef0 100644
--- a/components/upload/uploadList.tsx
+++ b/components/upload/uploadList.tsx
@@ -150,35 +150,30 @@ export default class UploadList extends React.Component<UploadListProps, any> {
         ? <span className={`${prefixCls}-list-item-actions`}>{previewIcon}{removeIcon}</span>
         : removeIconCross;
 
-      const item = (
+      const message = file.response || (file.error && file.error.statusText) || locale.uploadError;
+      const iconAndPreview = (file.status === 'error')
+        ? <Tooltip title={message}>{icon}{preview}</Tooltip>
+        : <span>{icon}{preview}</span>;
+
+      return (
         <div className={infoUploadingClass} key={file.uid}>
           <div className={`${prefixCls}-list-item-info`}>
-            {icon}
-            {preview}
-            {actions}
+            {iconAndPreview}
           </div>
+          {actions}
           {progress}
         </div>
       );
-
-      if (file.status === 'error') {
-        const message = file.response || (file.error && file.error.statusText) || locale.uploadError;
-        return (
-          <Tooltip title={message} key={file.uid}>
-            {item}
-          </Tooltip>
-        );
-      }
-
-      return item;
     });
     const listClassNames = classNames({
       [`${prefixCls}-list`]: true,
       [`${prefixCls}-list-${listType}`]: true,
     });
+    const animationDirection =
+      listType === 'picture-card' ? 'animate-inline' : 'animate';
     return (
       <Animate
-        transitionName={`${prefixCls}-margin-top`}
+        transitionName={`${prefixCls}-${animationDirection}`}
         component="div"
         className={listClassNames}
       >