Jquery 设置背景和内容的动画

我尝试在这里设置闪屏动画，我可以设置徽标动画，但当我尝试设置背景动画时，整体动画效果不起作用。
我在这里试过：
这是我的SCS：

 .container {
   display: table;
   width: 100%;
   height: 100vh;
   background: #ddd;
   margin: 20px;
 }

 .page {
   //Intro Screen
   &__intro {
     display: table-cell;
     vertical-align: middle;
     transition: all 0.2s ease-in-out;
     img {
       width: 150px;
       transition: all 0.2s ease-in-out;
     }
     &-wrapper {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       z-index: 10;
       display: table;
       width: 100%;
       height: 100vh;
       background: #fff;
       text-align: center;
     }
     &--hidden {
       img {
         width: 0;
         transition: all 0.2s ease-in-out;
       }
     }
   }
 }

以下是html：

<div class="container">
  <div class="page__intro-wrapper">
    <div class="page__intro">
      <img src="http://szmob.rbahn.com/img/sz-logo.svg" />
    </div>
  </div>
</div>

---

据我从你的帖子中了解，你正试图用class

来匹配div。page\u intro-wrapper

。问题是在您的SCS中，您正在将

.page\uu intro--hidden

类添加到该类中但不是所需div的映像中。 换言之，改变这一点：

 &--hidden {
   img {
     width: 0;
     transition: all 0.2s ease-in-out;
   }
 }

为此：

 &--hidden {
   img {
     width: 0 !important;
     transition: all 0.2s ease-in-out;
   }
     width: 0 !important;
     transition: all 0.2s ease-in-out;
 }

---

这是小提琴：

你想制作动画吗。页面\u简介包装背景？