diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md
index f421cec1de41e922c2576f6f306436f38facd00d..52930bd935d7e69a83d3253121154cf869c91f33 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md
@@ -77,6 +77,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 150px;
 }
 .rect{
   width: 200px;
@@ -92,7 +93,7 @@
   }
   /* 可以通过百分比指定动画运行的中间状态 */
   50% {    
-  background-color: \#f76160;    
+  background-color: #f76160;    
   transform:translate(100px) rotate(60deg) scale(1.3);  
   }  
   to {
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642001.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642001.gif
new file mode 100644
index 0000000000000000000000000000000000000000..03a0350651c4e4e1fa70593befa45455b662acd1
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642001.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642002.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642002.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f07cd18d127944605658f4424ad3b41a39b553c3
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642002.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642003.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642003.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c514af73d06209da17532eb6e3c9657f7a97060
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642003.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642004.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642004.gif
new file mode 100644
index 0000000000000000000000000000000000000000..eaee7ddb8a27352887aa17b30e906408bd236e9e
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642004.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642005.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642005.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d12fd80ac4f5ceec08b463b24eb48935227f621
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642005.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642006.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642006.png
new file mode 100644
index 0000000000000000000000000000000000000000..90a3e2af63bcc5c18114bfd8d112ca58f2c69e1b
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642006.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642007.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642007.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9325cd75369ef2a2b1d7784ce5aeef97ae1ec71c
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642007.gif differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642008.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642008.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e3f22225a2e1a04c19b9c2d948d8b8351c73056
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642008.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642009.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642009.gif
new file mode 100644
index 0000000000000000000000000000000000000000..057e146194b5e63ebeb5b07b0556e3495a4ce2ca
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642009.gif differ
diff --git a/zh-cn/application-dev/ui/js-framework-syntax-hml.md b/zh-cn/application-dev/ui/js-framework-syntax-hml.md
index 2684911c682c245a0c43b739904dd91bf28f1876..1d79a5fb5bcf0464fe1b8d4f9df107cf943f89d6 100644
--- a/zh-cn/application-dev/ui/js-framework-syntax-hml.md
+++ b/zh-cn/application-dev/ui/js-framework-syntax-hml.md
@@ -24,7 +24,12 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
   <text> {{content[1]}} </text>
 </div>
 ```
-
+```
+/*xxx.css*/
+.container{
+    margin: 200px;
+}
+```
 ```
 // xxx.js
 export default {
@@ -42,6 +47,7 @@ export default {
 >
 > - hml文件中的js表达式不支持ES6语法。
 
+![zh-cn_image_0000001118642003](figures/zh-cn_image_0000001118642003.png)
 
 ## 普通事件绑定
 
@@ -120,6 +126,7 @@ export default {
   }
   ```
 
+![zh-cn_image_0000001118642002](figures/zh-cn_image_0000001118642002.gif)
 
 ## 冒泡事件绑定<sup>5+</sup>
 
@@ -200,7 +207,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
 
 ```
 <!-- xxx.hml -->
-<div class="array-container">
+<div class="array-container" style="flex-direction: column;margin: 200px;">
   <!-- div列表渲染 -->
   <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
   <div for="{{array}}" tid="id" onclick="changeText">
@@ -252,6 +259,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
 >
 > - tid不支持表达式。
 
+![zh-cn_image_0000001118642001](figures/zh-cn_image_0000001118642001.gif)
 
 ## 条件渲染
 
@@ -297,6 +305,8 @@ export default {
 }
 ```
 
+![zh-cn_image_0000001118642004](figures/zh-cn_image_0000001118642004.gif)
+
 优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。
 
 ```
@@ -335,6 +345,8 @@ export default {
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 禁止在同一个元素上同时设置for和if属性。
 
+![zh-cn_image_0000001118642005](figures/zh-cn_image_0000001118642005.gif)
+
 ## 逻辑控制块
 
 &lt;block&gt;控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
@@ -367,6 +379,8 @@ export default {
 }
 ```
 
+![zh-cn_image_0000001118642006](figures/zh-cn_image_0000001118642006.png)
+
 ## 模板引用
 
 HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。
diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md
index ed3b8c30913e680cb7898fb360c76c9a516dfaab..9aac5acd159d34fd1fa19ca2370155b71da2b8f5 100644
--- a/zh-cn/application-dev/ui/js-framework-syntax-js.md
+++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md
@@ -184,7 +184,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 2. 通过$element获取DOM元素
    ```
    <!-- index.hml -->
-   <div class="container">
+   <div class="container" style="width:500px;height: 700px; margin: 100px;">
      <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    ```
@@ -213,6 +213,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
    };
    ```
 
+![zh-cn_image_0000001118642007](figures/zh-cn_image_0000001118642007.gif)
+
 ## 获取ViewModel
 
 根节点所在页面：
@@ -237,6 +239,8 @@ export default {
 }
 ```
 
+![zh-cn_image_0000001118642008](figures/zh-cn_image_0000001118642008.png)
+
 自定义parent组件：
 
 ```
@@ -272,7 +276,7 @@ export default {
 <!-- child.hml -->
 <div class="item" onclick="textClicked">
   <text class="text-style" onclick="childClicked">child component clicked</text>
-  <text class="text-style" if="{{show}}">hello child component</text>
+  <text class="text-style" if="{{isShow}}">hello child component</text>
 </div>
 ```
 
@@ -280,11 +284,11 @@ export default {
 // child.js
 export default {
   data: {
-    show: false,
+    isShow: false,
     text: 'I am child component!',
   },
   childClicked () {
-    this.show = !this.show;
+    this.isShow = !this.isShow;
     console.info('child component get parent text');
     console.info('${this.$parent().text}');
     console.info('child component get root text');
@@ -292,3 +296,5 @@ export default {
   },
 }
 ```
+
+![zh-cn_image_0000001118642009](figures/zh-cn_image_0000001118642009.gif)
\ No newline at end of file