diff --git a/docs/spec/transition.md b/docs/spec/transition.md
index 62e3a01667..f002a59f22 100644
--- a/docs/spec/transition.md
+++ b/docs/spec/transition.md
@@ -8,62 +8,32 @@
 
 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
 
-- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
+- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
 
-- Receding:  与当前页无关的信息元素应采用适当方式移除。
+- Receding: 与当前页无关的信息元素应采用适当方式移除。
 
 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
 
-````css
-video{
-  display: block;
-}
-````
-
-<br>
-
 ---
 
 
 ## 在视图变化时保持上下文
 
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title"></div>
-     <div class="preview-image-description"></div>
-    </div>
-  </span>
-</div>
+<img class="preview-img" align="right" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" type="video" />
 
 滑入与滑出：可以有效构建虚拟空间。
 
 <br>
 
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title">传送带示例</div>
-     <div class="preview-image-description"></div>
-    </div>
-  </span>
-</div>
+<img class="preview-img" align="right" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" type="video" />
+
 
 传送带：可极大地扩展虚拟空间。
 
 <br>
 
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title">折叠窗口示例</div>
-     <div class="preview-image-description"></div>
-    </div>
-  </span>
-</div>
+<img class="preview-img" align="right" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" type="video" />
+
 
 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
 
@@ -79,59 +49,30 @@ video{
 ---
 
 ## 解释刚刚发生了什么
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title">对象增加示例</div>
-     <div class="preview-image-description">新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。</div>
-    </div>
-  </span>
-</div>
+
+
+<img class="preview-img" align="right" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" type="video" />
+
+
 对象增加：在列表/表格中，新增了一个对象。
 
 <br>
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title">对象删除示例</div>
-     <div class="preview-image-description"></div>
-    </div>
-  </span>
-</div>
+
+<img class="preview-img" align="right" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" type="video" />
 
 对象删除：在列表/表格中，删除了一个对象。
 
 <br>
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title">对象更改示例</div>
-     <div class="preview-image-description">状态一：用户更改了『详情』中的值；<br>
-     状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。</div>
-    </div>
-  </span>
-</div>
+
+<img class="preview-img" align="right" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续『 1 秒』后消失，回复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" type="video" />
 
 对象更改：在列表/表格中，更改了一个对象。
 
 <br>
 
-<div class="preview-image-boxes cleafix">
-  <span>
-    <div class="preview-image-box">
-      <div class="video-player" style="position: relative;"></div>
-      <div class="preview-image-title">弹出框唤起</div>
-     <div class="preview-image-description">从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;</div>
-    </div>
-  </span>
-</div>
-
-弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。
-
+<img class="preview-img" align="right" alt="弹出框唤起示例" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" type="video" />
 
+弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关联。
 
 ---
 
@@ -145,8 +86,6 @@ video{
 
 <img class="preview-img" align="right" alt="页面过渡示例" src="https://os.alipayobjects.com/rmsportal/MjXZjESTHYphDUE.png">
 
-
 常见过渡效果：『按钮过渡』、『页面过渡』。
 
-
 <script src="/static/motionDemoLoad.js"></script>
diff --git a/scripts/demo.js b/scripts/demo.js
index 891691956b..e29b6bee0e 100644
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -193,10 +193,20 @@ const PriviewImg = React.createClass({
     const createMarkup = () => {
       return {__html: this.props.description}
     };
+
+    let node = <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />;
+    if (this.props.type === 'video') {
+      node = (
+        <video preload loop style={imgStyle}>
+          <source src={this.props.src} type="video/mp4" />
+        </video>
+      );
+    }
+
     return (
       <div className="preview-image-box" style={{ width: this.props.width }}>
         <div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
-          <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture"/>
+          {node}
         </div>
         <div className="preview-image-title">{this.props.alt}</div>
         <div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()}/>
@@ -245,7 +255,9 @@ InstantClickChangeFns.push(function () {
       priviewImgNodes.each(function (i, img) {
         priviewImgs.push(
           <PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
-                      noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
+                      noPadding={img.hasAttribute('noPadding')}
+                      description={img.getAttribute('description')}
+                      type={img.getAttribute('type')}
                       good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')}/>
         );
       });
diff --git a/site/static/motion.js b/site/static/motion.js
index 6f4576bae5..22c31bf8a0 100644
--- a/site/static/motion.js
+++ b/site/static/motion.js
@@ -846,23 +846,10 @@ $(function() {
       'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4',
     ],
     init: function() {
-      var self = this;
-      self.videoBox = $(".video-player");
-      $('<video preload loop></video>').appendTo(self.videoBox);
-      for (var i = 0; i < self.videoBox.length; i++) {
+      $(".preview-image-box video").each(function(i, video) {
         var svg = new SVG();
-        self.videoBox.eq(i).append(svg.node);
-        var video = self.videoBox.eq(i).find("video");
-        $('<source src="' + self.video[i] + '" type="video/mp4">').appendTo(video);
-        video.css({
-          "width": "100%"
-        });
-        video.append(svg);
-        svg.css({
-          "position": "absolute",
-          "top": 0,
-          "left": 0
-        });
+        video = $(video);
+        video.parent().append(svg.node);
         var playBox = _playBox(svg);
         svg.addChild(playBox);
         playBox.addEventListener("click", function(e) {
@@ -877,11 +864,10 @@ $(function() {
             this.setTimeout = setTimeout(function() {
               video[0].play();
             }, 500);
-
             m.attr("play", "true")
           }
-        })
-      }
+        });
+      });
     }
   };
   window.Motion.motionVideo = motionVideo;
diff --git a/site/static/style.less b/site/static/style.less
index fc0b880214..367f8c0d7d 100644
--- a/site/static/style.less
+++ b/site/static/style.less
@@ -1202,6 +1202,16 @@ a.entry-link:hover .anticon-smile {
   position: relative;
 }
 
+.preview-image-wrapper video {
+  display: block;
+  width: 100%;
+  + svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
 .preview-image-wrapper.good:after {
   content: '';
   width: 100%;