diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index ed6b6389c9..4ce034bdab 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -29,15 +29,15 @@ const Test = React.createClass({
     this.setState({ count });
   },
   onClick() {
-      this.setState({
-        show:!this.state.show
-      });
-    },
+    this.setState({
+      show: !this.state.show
+    });
+  },
   onNumberClick(){
     const count = this.state.count;
     this.setState({
-     count:count ? 0 : 5
-    })
+      count: count ? 0 : 5
+    });
   },
   render() {
     return <div>
diff --git a/components/badge/index.jsx b/components/badge/index.jsx
index fa030dd83b..5c1f659d54 100644
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@@ -1,29 +1,39 @@
 import React from 'react';
 import Animate from 'rc-animate';
-const prefixCls = 'ant-badge';
 
 class AntBadge extends React.Component {
   constructor(props) {
     super(props);
   }
 
-
   render() {
-    let count = this.props.count;
+    let { count, prefixCls } = this.props;
     const dot = this.props.dot;
-    // null undefined "" "0" 0
-    const closed = !count || count === '0';
-    const countIsNull = count === null ? true : false;
+
     count = count >= 100 ? '99+' : count;
+
+    // dot mode don't need count
+    if (dot) {
+      count = '';
+    }
+
+    // null undefined "" "0" 0
+    const hidden = (!count || count === '0') && !dot;
+    const className = prefixCls + (dot ? '-dot' : '-count');
+
     return (
-      <span className={prefixCls} title={!countIsNull ? count : ''} {...this.props}>
-          {this.props.children}
+      <span className={prefixCls} title={count} {...this.props}>
+        {this.props.children}
         <Animate component=""
           showProp="data-show"
-          transitionName="zoom-badge"
-          transitionAppear={true}
-        >
-        {closed && !dot ? null : <sup data-show={countIsNull ? dot : !closed} className={prefixCls + (!countIsNull ? '-count' : '-dot')}>{!countIsNull ? count : ''}</sup>}
+          transitionName={prefixCls + '-zoom'}
+          transitionAppear={true}>
+          {
+            hidden ? null :
+            <sup data-show={!hidden} className={className}>
+              {count}
+            </sup>
+          }
         </Animate>
       </span>
     );
@@ -31,7 +41,7 @@ class AntBadge extends React.Component {
 }
 
 AntBadge.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-badge',
   count: null,
   dot: false
 };
diff --git a/components/tag/index.jsx b/components/tag/index.jsx
index 78ea54952f..8f5192942d 100644
--- a/components/tag/index.jsx
+++ b/components/tag/index.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../iconfont';
-const prefixCls = 'ant-tag';
 
 class AntTag extends React.Component {
   constructor(props) {
@@ -42,7 +41,7 @@ class AntTag extends React.Component {
     return this.state.closed ? null
       : <Animate component=""
                  showProp="data-show"
-                 transitionName="zoom-tag"
+                 transitionName={this.props.prefixCls + '-zoom'}
                  onEnd={this.animationEnd.bind(this)}>
         <div data-show={!this.state.closing} className={className}>
           <a className={this.props.prefixCls + '-text'} {...this.props} />
@@ -53,7 +52,7 @@ class AntTag extends React.Component {
 }
 
 AntTag.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-tag',
   closable: false,
   onClose: function() {}
 };
diff --git a/style/components/badge.less b/style/components/badge.less
index 3a868f176a..0a99910403 100644
--- a/style/components/badge.less
+++ b/style/components/badge.less
@@ -40,6 +40,17 @@
     z-index: 10;
     box-shadow: 0 0 0 1px #fff;
   }
+
+  &-zoom-appear,
+  &-zoom-enter {
+    animation: antZoomBadgeIn .3s @ease-out-back;
+    animation-fill-mode: both;
+  }
+
+  &-zoom-leave {
+    animation: antZoomBadgeOut .3s @ease-in-back;
+    animation-fill-mode: both;
+  }
 }
 
 a .@{badge-prefix-cls} {
@@ -51,3 +62,22 @@ a .@{badge-prefix-cls} {
   }
 }
 
+@keyframes antZoomBadgeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0) translateX(-50%);
+  }
+  100% {
+    transform: scale(1) translateX(-50%);
+  }
+}
+
+@keyframes antZoomBadgeOut {
+  0% {
+    transform: scale(1) translateX(-50%);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0) translateX(-50%);
+  }
+}
diff --git a/style/components/tag.less b/style/components/tag.less
index c915dd3713..1fb932597d 100644
--- a/style/components/tag.less
+++ b/style/components/tag.less
@@ -71,9 +71,13 @@
   }
 
   &-close {
-
     width: 0 !important;
     padding: 0;
     margin-right: 0;
   }
+
+  &-zoom-leave {
+    animation: antZoomOut .3s @ease-in-out-circ;
+    animation-fill-mode: both;
+  }
 }
diff --git a/style/core/motion/zoom.less b/style/core/motion/zoom.less
index 1428600d89..24227f5cba 100644
--- a/style/core/motion/zoom.less
+++ b/style/core/motion/zoom.less
@@ -16,41 +16,6 @@
 .zoom-motion(zoom-left, antZoomLeft);
 .zoom-motion(zoom-right, antZoomRight);
 
-.zoom-badge-appear,.zoom-badge-enter {
-  animation: antZoomBadgeIn .3s @ease-out-back;
-  animation-fill-mode: both;
-}
-
-.zoom-badge-leave {
-  animation: antZoomBadgeOut .3s @ease-in-back;
-  animation-fill-mode: both;
-}
-
-.zoom-tag-leave {
-  animation: antZoomOut .3s @ease-in-out-circ;
-  animation-fill-mode: both;
-}
-
-@keyframes antZoomBadgeIn {
-  0% {
-    opacity: 0;
-    transform: scale(0) translateX(-50%);
-  }
-  100% {
-    transform: scale(1) translateX(-50%);
-  }
-}
-
-@keyframes antZoomBadgeOut {
-  0% {
-    transform: scale(1) translateX(-50%);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0) translateX(-50%);
-  }
-}
-
 @keyframes antZoomIn {
   0% {
     opacity: 0;