diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index fcb13f00f9..c06d9497bb 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -35,7 +35,7 @@ export default class Timeline extends React.Component<TimelineProps, any> {
       [`${prefixCls}-pending`]: !!pending,
       [`${prefixCls}-reverse`]: !!reverse,
     }, className,
-    mode);
+    `${prefixCls}-${mode}`);
 
     const pendingItem = !!pending ? (
       <TimelineItem
diff --git a/components/timeline/demo/alternate.md b/components/timeline/demo/alternate.md
index 0c7c01d8c4..7e8620112f 100644
--- a/components/timeline/demo/alternate.md
+++ b/components/timeline/demo/alternate.md
@@ -1,13 +1,13 @@
 ---
 order: 3
 title:
-  zh-CN: 基本用法
+  zh-CN: 交替展现
   en-US: Alternate
 ---
 
 ## zh-CN
 
-基本的时间轴。
+内容在时间轴两侧轮流出现。
 
 ## en-US
 
diff --git a/components/timeline/demo/right.md b/components/timeline/demo/right.md
index 3d94a08038..6ff193cb15 100644
--- a/components/timeline/demo/right.md
+++ b/components/timeline/demo/right.md
@@ -1,13 +1,13 @@
 ---
 order: 4
 title:
-  zh-CN: 自定义时间轴点
+  zh-CN: 右侧时间轴点
   en-US: Right alternate
 ---
 
 ## zh-CN
 
-可以设置为图标或其他自定义元素。
+时间轴点可以在内容的右边。
 
 ## en-US
 
diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less
index 529478260d..c310207cae 100644
--- a/components/timeline/style/index.less
+++ b/components/timeline/style/index.less
@@ -86,8 +86,8 @@
     }
   }
 
-  &.alternate,
-  &.right {
+  &.@{timeline-prefix-cls}-alternate,
+  &.@{timeline-prefix-cls}-right {
     .@{timeline-prefix-cls}-item {
 
       &-tail,
@@ -123,7 +123,7 @@
     }
   }
 
-  &.right {
+  &.@{timeline-prefix-cls}-right {
     .@{timeline-prefix-cls}-item-right {
       .@{timeline-prefix-cls}-item-tail,
       .@{timeline-prefix-cls}-item-head,