diff --git a/web/src/editor/Editor.jsx b/web/src/editor/Editor.jsx
index 9d257cfc58c94b20c207ff07c917281356ba7f99..5fc8c68642cd8af412b34d6a459d95d98f7fcace 100644
--- a/web/src/editor/Editor.jsx
+++ b/web/src/editor/Editor.jsx
@@ -49,7 +49,7 @@ class Editor extends React.Component {
             statusBarShow: global.app.storage.statusBarShow
         };
 
-        this.type = 'scene'; // 编辑器类型：scene, mesh, texture, material, terrain, ai
+        this.type = 'scene'; // 编辑器类型：scene, mesh, tsexture, material, terrain, ai
 
         this.onToggle = this.onToggle.bind(this);
     }
@@ -385,6 +385,7 @@ class Editor extends React.Component {
         }
 
         global.app.call('objectSelected', this, object);
+        global.app.call('PropertySelected', this, object);
     }
 
     selectById(id) { // 根据id选中物体
diff --git a/web/src/editor/assets/AssetsPanel.jsx b/web/src/editor/assets/AssetsPanel.jsx
index fd248ec8925fd2eec04d5da4624854fc972a82fe..aa9edfa398e4c06de0792d54c871edb6060efe7b 100644
--- a/web/src/editor/assets/AssetsPanel.jsx
+++ b/web/src/editor/assets/AssetsPanel.jsx
@@ -25,6 +25,7 @@ import VideoPanel from './VideoPanel.jsx';
 import LogPanel from './LogPanel.jsx';
 import global from '../../global';
 import ScriptPanel from './ScriptPanel.jsx';
+import TimelinePanel from "../timeline/TimelinePanel.jsx";
 
 /**
  * 资源面板
@@ -98,6 +99,16 @@ class AssetsPanel extends React.Component {
                 />
             </Accordion>
 
+            <Accordion name={'Animation'}
+                       title={`${_t('Animation')}`}
+                // title={`${_t('Scene')}(${sceneCount})`}
+                // maximizable
+            >
+                <TimelinePanel className={'TimelinePanel'}
+                             show={index++ === activeIndex}
+                />
+            </Accordion>
+
             {!enableAuthority || authorities.includes('LIST_MAP') ? <Accordion name={'Map'}
                 title={`${_t('Map')}`}
                 // title={`${_t('Map')}(${mapCount})`}
diff --git a/web/src/editor/sidebar/EditorSideBar.jsx b/web/src/editor/sidebar/EditorSideBar.jsx
index fcdc08bfa22c8cdcdd212c7740af35627cd4f116..708f71ec7061a645ce6ab8e9e728bc025fba26d6 100644
--- a/web/src/editor/sidebar/EditorSideBar.jsx
+++ b/web/src/editor/sidebar/EditorSideBar.jsx
@@ -31,8 +31,9 @@ class EditorSideBar extends React.Component {
         };
 
         /*this.handleTopTabChange = this.handleTopTabChange.bind(this);*/
-        this.handleBottomTabChange = this.handleBottomTabChange.bind(this);
-        /*this.handleAnimationSelected = this.handleAnimationSelected.bind(this);*/
+        // this.handleBottomTabChange = this.handleBottomTabChange.bind(this);
+        this.handleAnimationSelected = this.handleAnimationSelected.bind(this);
+        this.handlePropertySelected = this.handlePropertySelected.bind(this);
     }
 
     render() {
@@ -44,37 +45,44 @@ class EditorSideBar extends React.Component {
             </div>*/}
             <PropertyTabLayout className={'bottom'}
                 activeTabIndex={bottomIndex}
-                onActiveTabChange={this.handleBottomTabChange}
+                // onActiveTabChange={this.handleBottomTabChange}
             >
                 <PropertyPanel title={_t('Property')} />
-               {/* <ScriptPanel title={_t('Script')} />
-                <AnimationPropertyPanel title={_t('Animation')} />*/}
+                {/*<ScriptPanel title={_t('Script')} />*/}
+                <AnimationPropertyPanel title={_t('Animation')} />
             </PropertyTabLayout>
         </VBoxLayout>;
     }
-/*
+
 
     componentDidMount() {
         global.app.on(`animationSelected.EditorSideBar`, this.handleAnimationSelected);
+        global.app.on(`PropertySelected.EditorSideBar`, this.handlePropertySelected);
     }
-*/
+
 
     /*handleTopTabChange(index) {
         this.setState({
             topIndex: index
         });
     }*/
-    handleBottomTabChange(index) {
+    // handleBottomTabChange(index) {
+    //     this.setState({
+    //         bottomIndex: index
+    //     });
+    // }
+
+   handleAnimationSelected() {
         this.setState({
-            bottomIndex: index
+            bottomIndex: 1
         });
     }
 
-   /* handleAnimationSelected() {
+    handlePropertySelected() {
         this.setState({
-            bottomIndex: 2
+            bottomIndex: 0
         });
-    }*/
+    }
 }
 
 export default EditorSideBar;
\ No newline at end of file
diff --git a/web/src/event/EventList.js b/web/src/event/EventList.js
index 49babf4a0d30f01935a509d1a493f26a38cde597..0aaa5f5bf7a6000cc039e6f32b0329ccd90ab23b 100644
--- a/web/src/event/EventList.js
+++ b/web/src/event/EventList.js
@@ -114,6 +114,7 @@ const EventList = [
     'resetAnimation', // 重制动画时间轴
     'startAnimation', // 开始播放动画
     'animationTime', // 时间轴发送当前动画时间
+    'PropertySelected', // 物体选中事件
 
     // 底部面板事件
     'selectBottomPanel', // 点击选择某个面板
diff --git a/web/src/ui/layout/PropertyTabLayout.jsx b/web/src/ui/layout/PropertyTabLayout.jsx
index 62bddfd6c05e1494c650bc9c3077dfd56aad4142..163f2256b859b26272c189e8b44f89cd4ea4d393 100644
--- a/web/src/ui/layout/PropertyTabLayout.jsx
+++ b/web/src/ui/layout/PropertyTabLayout.jsx
@@ -30,7 +30,7 @@ class PropertyTabLayout extends React.Component {
         >
             <div className={'tabs'}>
                 {React.Children.map(children, (n, i) => {
-                    return <div
+                    return i === 0 && <div // 不显示动画标签
                         className={classNames('tab', i === activeTabIndex ? 'selected' : null)}
                         key={i}
                         tbindex={i}
diff --git a/web/src/ui/property/css/PropertyGroup.css b/web/src/ui/property/css/PropertyGroup.css
index c2bbf2db4f43b078f5caa6a417ee853a76d3dffd..2d1643aea2dbe2e516e23595199d952fe4e3b2f0 100644
--- a/web/src/ui/property/css/PropertyGroup.css
+++ b/web/src/ui/property/css/PropertyGroup.css
@@ -76,7 +76,7 @@
 
 .PropertyGroup>.content>.property>.label {
     background-color: rgba(51, 51, 51, 100);
-    width: 60px;
+    width: 100px;
     padding: 0 4px;
     display: inline-flex;
     align-items: center;
diff --git a/web/src/ui/timeline/Timeline.jsx b/web/src/ui/timeline/Timeline.jsx
index fdc7b009c8829be13cad77685b9648d2fea38950..81a665d1f1bf6040fae39361069889c697c9faa3 100644
--- a/web/src/ui/timeline/Timeline.jsx
+++ b/web/src/ui/timeline/Timeline.jsx
@@ -191,7 +191,7 @@ class Timeline extends React.Component {
         const canvas = this.canvasRef.current;
 
         canvas.style.width = width + margin * 2 + 'px';
-        canvas.width = canvas.clientWidth;
+        canvas.width = 3600; // 原本是等于canvas.clientWidth，但是不知道为啥显示零，直接修改数值
         canvas.height = 32;
 
         const context = canvas.getContext('2d');
diff --git a/web/src/ui/timeline/css/Timeline.css b/web/src/ui/timeline/css/Timeline.css
index 0fa02e5d052acaab8f771aa98a45686436a8479a..669d15e60b691e633876eb22e47415d14bb3741b 100644
--- a/web/src/ui/timeline/css/Timeline.css
+++ b/web/src/ui/timeline/css/Timeline.css
@@ -4,6 +4,7 @@
     font-size: 12px;
     display: flex;
     flex-direction: column;
+    background-color: white;
 }
 
 .Timeline>.controls>.IconButton {
@@ -40,7 +41,7 @@
     position: absolute;
     width: 100px;
     height: 32px;
-    background: #fff;
+    /*background: #fff;*/
     z-index: 10;
 }