diff --git a/layout/_partial/sidebar/logo.ejs b/layout/_partial/sidebar/logo.ejs
index 74d7f20..523837c 100644
--- a/layout/_partial/sidebar/logo.ejs
+++ b/layout/_partial/sidebar/logo.ejs
@@ -2,7 +2,7 @@
   <% if (md_text(theme.sidebar.logo.avatar)) { %>
     <a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'>
       <% if (theme.style.animated_avatar.animate) { %>
-        <img no-lazy class='bg' src='<%- theme.style.animated_avatar.background %>'/>
+        <img no-lazy class='bg' style='opacity:0' src='<%- theme.style.animated_avatar.background %>'/>
       <% } %>
       <img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/>
     </a>
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index f9bfd40..c0da4cf 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -34,9 +34,9 @@
       border-radius: @width
     if hexo-config('style.animated_avatar.animate')
       img.bg
-        trans1 opacity
+        trans1: opacity
         position: absolute
-        opacity: 0
+        opacity: 0 !important
         z-index: -1
       @keyframes spin
         from
@@ -45,13 +45,13 @@
           transform:rotate(360deg)
     if hexo-config('style.animated_avatar.animate') == 'always'
       img.bg
-        opacity: 1
+        opacity: 1 !important
         animation: spin infinite 1s
         animation-timing-function: linear
     if hexo-config('style.animated_avatar.animate') == 'auto'
       &:hover
         img.bg
-          opacity: 1
+          opacity: 1 !important
           animation: spin infinite 1s
           animation-timing-function: linear