diff --git a/pages.json b/pages.json
index 5707ae6dd2b5926de2734a4402a7c62c7ffdbc3e..4da23805d96e6030ee138cc8d0d62378d498eb93 100644
--- a/pages.json
+++ b/pages.json
@@ -84,7 +84,25 @@
             "style": {
                 "navigationBarTitleText": "image"
             }
-        },
+        },
+		{
+			"path": "pages/component/image/image-format",
+			"style": {
+				"navigationBarTitleText": "image-format"
+			}
+		},
+		{
+			"path": "pages/component/image/image-mode",
+			"style": {
+				"navigationBarTitleText": "image-mode"
+			}
+		},
+		{
+			"path": "pages/component/image/image-path",
+			"style": {
+				"navigationBarTitleText": "image-path"
+			}
+		},
         {
             "path": "pages/component/web-view/web-view",
             "style": {
@@ -416,6 +434,16 @@
             "style": {
                 "navigationBarTitleText": "text-decoration-line"
             }
+        },{
+            "path": "pages/CSS/transition/transition",
+            "style": {
+                "navigationBarTitleText": "Transition"
+            }
+        },{
+            "path": "pages/CSS/transform/transform",
+            "style": {
+                "navigationBarTitleText": "Transform"
+            }
         }, {
             "path": "pages/API/request/request",
             "style": {
@@ -486,6 +514,13 @@
                 "enablePullDownRefresh": false
             }
 
+        }, {
+            "path": "pages/API/preview-image/preview-image",
+            "style": {
+                "navigationBarTitleText": "图片预览",
+                "enablePullDownRefresh": false
+            }
+
         }
     ],
     "globalStyle": {
diff --git a/pages/API/preview-image/preview-image.uvue b/pages/API/preview-image/preview-image.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..91d94059924b80fd96793a6635673c7afd219944
--- /dev/null
+++ b/pages/API/preview-image/preview-image.uvue
@@ -0,0 +1,111 @@
+<template>
+	<view style="padding-left: 16rpx;padding-right: 16rpx;">
+		<view>
+			<text class="text-desc">图片指示器样式</text>
+			<radio-group class="cell-ct" style="background-color: white;" @change="onIndicatorChanged">
+				<view class="indicator-it" v-for="(item,index) in indicator" :key="item.value">
+					<radio :checked="index === 0" :value="item.value">{{item.name}}</radio>
+				</view>
+			</radio-group>
+		</view>
+		<view>
+			<checkbox-group @change="onCheckboxChange" style="margin-top: 32rpx;margin-bottom: 32rpx;margin-left: 16rpx;">
+				<checkbox :checked="isLoop" style="margin-right: 30rpx;">循环播放</checkbox>
+			</checkbox-group>
+		</view>
+		<view style="background-color: white;">
+			<text class="text-desc">点击图片开始预览</text>
+			<view class="cell-ct" style="background-color: #eeeeee; padding: 16rpx;">
+				<view class="cell cell-choose-image" v-for="(image,index) in imageList" :key="index">
+					<image style="width: 210rpx;height: 210rpx;" mode="aspectFit" :src="image" @click="previewImage(index)"></image>
+				</view>
+				<image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
+					<view></view>
+				</image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	type ItemType = {
+		value: string,
+		name: string
+	}
+
+	export default {
+		data() {
+			return {
+				imageList: ["https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", "/static/logo.png"],
+				indicator: [{
+					value: "default",
+					name: "圆点"
+				}, {
+					value: "number",
+					name: "数字"
+				}, {
+					value: "none",
+					name: "不显示"
+				}] as ItemType[],
+				currentIndicator: "default",
+				isLoop: true
+			}
+		},
+		methods: {
+			previewImage(index: number) {
+				uni.previewImage({
+					urls: this.imageList,
+					current: index,
+					indicator: this.currentIndicator,
+					loop: this.isLoop
+				})
+			},
+			chooseImage() {
+				uni.chooseImage({
+					sourceType: ['album'],
+					success: (e) => {
+						this.imageList = this.imageList.concat(e.tempFilePaths)
+					},
+					fail(e) {
+					}
+				})
+			},
+			onIndicatorChanged(e: RadioGroupChangeEvent) {
+				this.currentIndicator = e.detail.value
+			},
+			onCheckboxChange(e: CheckboxGroupChangeEvent) {
+				this.isLoop = !this.isLoop
+			}
+		}
+	}
+</script>
+
+<style>
+	.text-desc {
+		margin-top: 32rpx;
+		margin-left: 16rpx;
+		margin-bottom: 32rpx;
+		font-weight: bold;
+	}
+
+	.cell-ct {
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: row;
+	}
+
+	.cell {
+		margin-left: 14rpx;
+		width: 210rpx;
+		height: 210rpx;
+	}
+
+	.cell-choose-image {
+		border-width: 1px;
+		border-color: lightgray;
+	}
+
+	.indicator-it {
+		margin: 16rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/transform/transform.uvue b/pages/CSS/transform/transform.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..284581d60d2f835c351972b9ce50f07a225ab8df
--- /dev/null
+++ b/pages/CSS/transform/transform.uvue
@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<view class="baseStyle" style="transform: translateX(120%);">translateX(120%)</view>
+		<view class="baseStyle" style="transform: translateY(-30rpx);">translateY(-30rpx)</view>
+		<view class="baseStyle" style="transform: translate(120%,50%);">translate(120%,50%)</view>
+		<view class="baseStyle" style="transform: scaleX(0.8);">scaleX(0.8)</view>
+		<view class="baseStyle" style="transform: scaleY(0.8);">scaleY(0.8)</view>
+		<view class="baseStyle" style="transform: scale(0.8,0.8);">scale(0.8,0.8)</view>
+		<view class="baseStyle" style="transform: rotate(20deg);">rotate(20deg)</view>
+		<view class="baseStyle" style="transform: rotateX(50deg);">rotateX(50deg)</view>
+		<view class="baseStyle" style="transform: rotateY(50deg);">rotateY(50deg)</view>
+		<view class="baseStyle" style="transform: rotateZ(50deg);">rotateZ(50deg)</view>
+	</view>
+</template>
+
+<script lang="ts">
+	export default {
+		data() {
+			return {}
+		},
+		methods: {
+		}
+	}
+</script>
+
+<style>
+	.baseStyle {
+		background-color: cadetblue;
+		margin: 10rpx;
+		width: 300rpx;
+		height: 300rpx;
+		align-items: center;
+		flex: 1;
+		justify-content: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/CSS/transition/transition.uvue b/pages/CSS/transition/transition.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..b79445df65cb11a7b0b20cd08e49f54a28a6e190
--- /dev/null
+++ b/pages/CSS/transition/transition.uvue
@@ -0,0 +1,142 @@
+<template>
+	<view>
+		<view class="container">
+			<text class="text">点击修改宽度</text>
+			<view class="base-style transition-width" :style="widthOrHeight" @click="changeWidthOrHeight"></view>
+		</view>
+		<view class="container">
+			<text class="text">点击修改Margin</text>
+			<view class="base-style transition-margin" :style="styleMargin" @click="changeMargin"></view>
+		</view>
+		<view class="container">
+			<text class="text">点击修改Padding</text>
+			<view class="base-style transition-padding" :style="stylePadding" @click="changePadding">
+				<view style="background-color: black;height: 50px;width: 50px;"></view>
+			</view>
+		</view>
+		<view class="container">
+			<text class="text">点击修改Background</text>
+			<view class="base-style transition-background" :style="styleBackground" @click="changeBackground"></view>
+		</view>
+		<view class="container">
+			<text class="text">点击修改Transform</text>
+			<view class="base-style transition-transform" :style="styleTransform" @click="changeTransform"></view>
+		</view>
+		<view class="container">
+			<text class="text">点击修改Border</text>
+			<view class="base-style transition-border" :style="styleBorder" @click="changeBorder"></view>
+		</view>
+		<view class="container">
+			<text class="text">点击修改Position</text>
+			<view class="base-style transition-position" :style="stylePosition" @click="changestylePosition"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isTranstionWidthOrHeight: false,
+				widthOrHeight: "",
+				isTranstionChangeMargin: false,
+				styleMargin: "",
+				isTransitionStylePadding: false,
+				stylePadding: "",
+				isTransitionstyleBackground: false,
+				styleBackground: "",
+				isTransitionStyleTransform: false,
+				styleTransform: "",
+				isTransitionstyleBorder: false,
+				styleBorder: "",
+				isTransitionstylePosition: false,
+				stylePosition: ""
+			}
+		},
+		methods: {
+			changeWidthOrHeight() {
+				this.widthOrHeight = this.isTranstionWidthOrHeight ? "width:400rpx" : "width:600rpx"
+				this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
+			},
+			changeMargin() {
+				this.styleMargin = this.isTranstionChangeMargin ? "margin-top:0rpx;margin-left:0rpx" : "margin-top:100rpx;margin-left:100rpx"
+				this.isTranstionChangeMargin = !this.isTranstionChangeMargin
+			},
+
+			changePadding() {
+				this.stylePadding = this.isTransitionStylePadding ? "padding-top:0rpx;padding-left:0rpx" : "padding-top:100rpx;padding-left:100rpx"
+				this.isTransitionStylePadding = !this.isTransitionStylePadding
+			},
+			changeBackground() {
+				this.styleBackground = this.isTransitionstyleBackground ? "background-color: brown;opacity:1" : "background-color: black;opacity:0.5"
+				this.isTransitionstyleBackground = !this.isTransitionstyleBackground
+			},
+			changeTransform() {
+				this.styleTransform = this.isTransitionStyleTransform ? "transform: rotate(0deg)" : "transform: rotate(135deg)"
+				this.isTransitionStyleTransform = !this.isTransitionStyleTransform
+			},
+			changeBorder() {
+				this.styleBorder = this.isTransitionstyleBorder ? "border-color: brown;" : "border-color: yellow;"
+				this.isTransitionstyleBorder = !this.isTransitionstyleBorder
+			},
+			changestylePosition() {
+				this.stylePosition = this.isTransitionstylePosition ? "left:0rpx" : "left:150rpx;"
+				this.isTransitionstylePosition = !this.isTransitionstylePosition
+			}
+		}
+	}
+</script>
+
+<style>
+	.container {
+		margin: 15rpx;
+		background-color: white;
+	}
+	.text{
+		margin-top: 20rpx;
+		margin-bottom: 32rpx;
+	}
+
+	.base-style {
+		width: 400rpx;
+		height: 400rpx;
+		background-color: brown;
+	}
+
+	.transition-width {
+		transition-property: width;
+		transition-duration: 1000;
+	}
+
+	.transition-margin {
+		transition-property: margin-left, margin-top;
+		transition-duration: 1000;
+	}
+
+	.transition-padding {
+		transition-property: padding-left, padding-top;
+		transition-duration: 1000;
+	}
+
+	.transition-background {
+		transition-property: background-color, opacity;
+		transition-duration: 1000;
+	}
+
+	.transition-transform {
+		transition-property: transform;
+		transition-duration: 1000;
+	}
+
+	.transition-border {
+		border-width: 5px;
+		border-color: brown;
+		transition-property: border-color;
+		transition-duration: 1000;
+	}
+
+	.transition-position {
+		transition-property: left;
+		transition-duration: 1000;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/image/image-format.uvue b/pages/component/image/image-format.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..35f263067ceb64dffe013c3184aca55fbb21ba1e
--- /dev/null
+++ b/pages/component/image/image-format.uvue
@@ -0,0 +1,64 @@
+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
+				<text class="uni-title-text">支持的图片格式示例</text>
+			</view>
+			<view v-for="(item,index) in data" :key="index">
+				<text class="uni-subtitle-text">{{item.format}}</text>
+				<view class="uni-center" style="background:#FFFFFF;">
+					<image class="image" mode="widthFix" :src="item.src"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'image-format',
+				data: [{
+						format: 'png',
+						src: '/static/logo.png'
+					},
+					{
+						format: 'jpg',
+						src: '/static/logo.jpg'
+					},
+					{
+						format: 'webp',
+						src: '/static/logo.webp'
+					},
+					{
+						format: 'bmp',
+						src: '/static/logo.bmp'
+					},
+					{
+						format: 'gif',
+						src: '/static/logo.gif'
+					}
+				] as Array < ImageFormat >
+			}
+		}
+	}
+
+	class ImageFormat {
+		format: string;
+		src: string;
+
+		constructor(format: string, src: string) {
+			this.format = format;
+			this.src = src;
+		}
+	}
+</script>
+
+<style>
+	.image {
+		margin: 40rpx auto;
+		width: 200rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/image/image-mode.uvue b/pages/component/image/image-mode.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..4861b947cb711a9f7e02fe6fcb38b850a30561c5
--- /dev/null
+++ b/pages/component/image/image-mode.uvue
@@ -0,0 +1,102 @@
+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
+				<text class="uni-title-text">支持的图片缩放模式示例</text>
+			</view>
+			<view v-for="(item,index) in data" :key="index">
+				<text class="uni-subtitle-text">{{item.mode}}: {{item.description}}</text>
+				<view class="uni-center" style="background:#FFFFFF;">
+					<image class="image" :mode="item.mode" src="/static/shuijiao.jpg"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'image-mode',
+				data: [{
+						mode: 'scaleToFill',
+						description: '不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'
+					},
+					{
+						mode: 'aspectFit',
+						description: '保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来'
+					},
+					{
+						mode: 'aspectFill',
+						description: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'
+					},
+					{
+						mode: 'top',
+						description: '不缩放图片，只显示图片的顶部区域'
+					},
+					{
+						mode: 'bottom',
+						description: '不缩放图片，只显示图片的底部区域'
+					},
+					{
+						mode: 'center',
+						description: '不缩放图片，只显示图片的中间区域'
+					},
+					{
+						mode: 'left',
+						description: '不缩放图片，只显示图片的左边区域'
+					},
+					{
+						mode: 'right',
+						description: '不缩放图片，只显示图片的右边区域'
+					},
+					{
+						mode: 'top left',
+						description: '不缩放图片，只显示图片的左上边区域'
+					},
+					{
+						mode: 'top right',
+						description: '不缩放图片，只显示图片的右上边区域'
+					},
+					{
+						mode: 'bottom left',
+						description: '不缩放图片，只显示图片的左下边区域'
+					},
+					{
+						mode: 'bottom right',
+						description: '不缩放图片，只显示图片的右下边区域'
+					},
+					{
+						mode: 'widthFix',
+						description: '宽度不变，高度自动变化，保持原图宽高比不变'
+					},
+					{
+						mode: 'heightFix',
+						description: '高度不变，宽度自动变化，保持原图宽高比不变'
+					}
+				] as Array < ImageMode >
+			}
+		}
+	}
+
+	class ImageMode {
+		mode: string;
+		description: string;
+
+		constructor(mode: string, description: string) {
+			this.mode = mode;
+			this.description = description;
+		}
+	}
+</script>
+
+<style>
+	.image {
+		margin: 40rpx auto;
+		width: 200rpx;
+		height: 200rpx;
+		background-color: #eeeeee;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/image/image-path.uvue b/pages/component/image/image-path.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..fec25fef8d5c8cb1372e2da3009cafd7fc9afacb
--- /dev/null
+++ b/pages/component/image/image-path.uvue
@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
+				<text class="uni-title-text">支持的图片路径示例</text>
+			</view>
+			<view v-for="(item,index) in data" :key="index">
+				<text class="uni-subtitle-text">{{item.description}}</text>
+				<view class="uni-center" style="background:#FFFFFF;">
+					<image class="image" mode="widthFix" :src="item.src"></image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'image-path',
+				data: [{
+						src: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
+						description: '网络路径'
+					},
+					{
+						src: '/static/logo.png',
+						description: '本地相对路径'
+					},
+					{
+						src: 'file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/logo.png',
+						description: '本地绝对路径'
+					},
+					{
+						src: 'data:image/*;base64,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',
+						description: 'Base64'
+					}
+				] as Array < ImagePath >
+			}
+		}
+	}
+
+	class ImagePath {
+		src: string;
+		description: string;
+
+		constructor(src: string, description: string) {
+			this.src = src;
+			this.description = description;
+		}
+	}
+</script>
+
+<style>
+	.image {
+		margin: 40rpx auto;
+		width: 200rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/image/image.uvue b/pages/component/image/image.uvue
index 2a7b10858e2c0300710ffa5dc8c8a4c7be6b9747..de72914fe37ffdaafa1d89fea43cff078f7db68a 100644
--- a/pages/component/image/image.uvue
+++ b/pages/component/image/image.uvue
@@ -1,44 +1,58 @@
 <template>
-    <view>
-        <page-head :title="title"></page-head>
-        <view class="uni-padding-wrap uni-common-mt">
-            <view class="uni-title">
-                <text class="uni-title-text">
-                    示例1
-                </text>
-                <text class="uni-subtitle-text">
-                    本地图片
-                </text>
-            </view>
-            <view class="uni-center" style="background:#FFFFFF; font-size:0;">
-                <image class="image" mode="widthFix" src="/static/uni.png" />
-            </view>
-            <view class="uni-title">
-                <text class="uni-title-text">
-                    示例2
-                </text>
-                <text class="uni-subtitle-text">
-                    网络图片
-                </text>
-            </view>
-            <view class="uni-center" style="background:#FFFFFF; font-size:0;">
-                <image class="image" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png" />
-            </view>
-        </view>
-    </view>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-center" style="background:#FFFFFF;">
+				<image class="image" :fade-show="true" mode="widthFix" src="/static/logo.png" @error="error"
+					@load="load"></image>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @tap="imageFormat">图片格式示例</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @tap="imageMode">图片缩放模式示例</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @tap="imagePath">图片路径示例</button>
+			</view>
+		</view>
+	</view>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                title: 'image'
-            }
-        }
-    }
+	export default {
+		data() {
+			return {
+				title: 'image'
+			}
+		},
+		methods: {
+			error(event: ImageErrorEvent) {
+				console.log(event.type, event.detail);
+			},
+			load(event: ImageLoadEvent) {
+				console.log(event.type, event.detail);
+			},
+			imageFormat() {
+				uni.navigateTo({
+					url: '/pages/component/image/image-format'
+				});
+			},
+			imageMode() {
+				uni.navigateTo({
+					url: '/pages/component/image/image-mode'
+				});
+			},
+			imagePath() {
+				uni.navigateTo({
+					url: '/pages/component/image/image-path'
+				});
+			}
+		}
+	}
 </script>
 <style>
-    .image {
-        margin: 40rpx auto;
-        width: 200rpx;
-    }
+	.image {
+		margin: 40rpx auto;
+		width: 200rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/tabBar/API/API.uvue b/pages/tabBar/API/API.uvue
index 49b6784c39b16836c90a47a661a0d16d32e3ca13..3e0b1cc58cceda39d5306df4ad4851c7fdd2da5f 100644
--- a/pages/tabBar/API/API.uvue
+++ b/pages/tabBar/API/API.uvue
@@ -270,6 +270,11 @@
                             name: "图片",
                             url: "image",
                         },
+						{
+						    name: "图片预览",
+						    url: "preview-image",
+							enable: true
+						},
                         // #ifndef MP-LARK
                         {
                             name: "音频",
diff --git a/pages/tabBar/CSS/CSS.uvue b/pages/tabBar/CSS/CSS.uvue
index 50b2d72417f0bc648e8d80e1a7e724796c3f3436..4cde75639b70d740422c56757df59003b83d055e 100644
--- a/pages/tabBar/CSS/CSS.uvue
+++ b/pages/tabBar/CSS/CSS.uvue
@@ -5,19 +5,16 @@
 		</view>
 		<view class="uni-hello-text">
 			<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
-			<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
-				:inWhiteList="true"></u-link>
+			<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
 		</view>
 		<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
 			<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
 				<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
-				<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
-					class="uni-icon"></image>
+				<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" class="uni-icon"></image>
 			</view>
 			<view class="uni-panel-c" v-if="item.open">
 				<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
-					<text class="uni-navigate-text"
-						:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
+					<text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
 					<image :src="arrowRightIcon" class="uni-icon"></image>
 				</view>
 			</view>
@@ -298,6 +295,22 @@
 							url: 'pages/CSS/text/text-decoration-line'
 						}
 					] as Page[]
+				}, {
+					id: 'animate',
+					name: '动画',
+					open: false,
+					pages: [
+						{
+							name: 'transition',
+							enable: true,
+							url: 'pages/CSS/transition/transition'
+						},
+						{
+							name: 'transform',
+							enable: true,
+							url: 'pages/CSS/transform/transform'
+						}
+					] as Page[]
 				}
 				] as ListItem[],
 				arrowUpIcon: '/static/icons/arrow-up.png',
diff --git a/static/shuijiao.jpg b/static/shuijiao.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b654b9cd54d3065bfdacaa29924485d58bf7b281
Binary files /dev/null and b/static/shuijiao.jpg differ