diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index 742be54..bf5a833 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -9,6 +9,7 @@
     border-width: 1px 0px 0px 0px;
     border-color: @text-bg-color-lighter @bg-color @bg-color @bg-color;
     cursor: pointer;
+    transition: all 0.15s;
     &.active {
       border-style: hidden hidden hidden solid;
       border-width: 1px 0px 0px 6px;
@@ -40,6 +41,7 @@
           padding: 5px 7px 5px 7px;
           &.clip-data-status {
             color: @primary-color;
+            transition: all 0.15s;
             &:hover {
               color: @bg-color;
               background-color: @primary-color;
@@ -93,6 +95,7 @@
         border-radius: 5px;
         width: 30px;
         height: 30px;
+        transition: all 0.15s;
         &:hover {
           color: @bg-color;
           background: @primary-color;
diff --git a/src/style/cpns/clip-switch.less b/src/style/cpns/clip-switch.less
index 39cc207..92fdbaf 100644
--- a/src/style/cpns/clip-switch.less
+++ b/src/style/cpns/clip-switch.less
@@ -9,6 +9,7 @@
   width: 100%;
   color: @text-color;
   background-color: @nav-bg-color;
+  transition: all 0.15s;
   .active {
     color: @primary-color;
     background-color: @bg-color;
@@ -26,6 +27,7 @@
       cursor: pointer;
       border-radius: 5px;
       font-size: 14px;
+      transition: all 0.15s;
       &:hover {
         background-color: @nav-hover-bg-color;
         transition: all 0.15s ease-in-out;