尝试使用悬停创建分隔缝动画

Question

嘿，伙计们，我正在尝试创建一个网站，我在第二部分有这两张卡片，我想做的是隐藏起来，直到我悬停在特定区域上，当我滚动或悬停到侧面的不同部分时，再一次淡出，但我想不出如何隐藏这两张卡片和淡出部分，我可以用那个特定部分的悬停css属性显示它们，但我不能弄清楚其余的部分。

这是HTML，因为你可以在这里看到我想要的2个div，然后当我将鼠标悬停在这一部分上时就会显示出来，然后淡出并隐藏在任何其他地方

 <section class="cards">
    <div class="cards-container margin-top-1">
      <div class="cards-design-1 margin-right-10 margin-top-inner-elements cards-animation-1">1</div>
      <div class="cards-design-2 margin-right-10 margin-top-inner-elements cards-animation-2">2</div>


    </div>

对于这一部分的css，这也是我在底部使用关键帧的方式。另外，我使用的是sass而不是css，所以这只是一个提示。

.cards{
    height: 100vh;
    background-image:linear-gradient(to right, 
    rgba(1, 77, 113, 0.6),
    rgba(1, 77, 113, 0.6)), 
    url(../images/books.jpg);
    background-size: cover;
    background-position: contain;
    position: relative;
    margin: 0 20px 0 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px 5px;

    &-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
    }

    &-design-1{
      height: 70vh;
      width: 40vw;
      background-color: $color-nav-blue;

  }

   &-design-2{
      height: 70vh;
      width: 40vw;
      background-color: $color-white;

    }

&:hover{
  .cards-animation-1{
  animation: slideleft 2s;
  }
}


&:hover{
  .cards-animation-2{
  animation: slideright 2s;
  }
}


 }

Answer 1

您需要将div设置为初始隐藏。我建议不要使用关键帧，因为它们比过渡更难维护。同样，变换自然会给你一个反向的动画。

    .cards{
    height: 100vh;
    background-image:linear-gradient(to right, 
    rgba(1, 77, 113, 0.6),
    rgba(1, 77, 113, 0.6)), 
    url(../images/books.jpg);
    background-size: cover;
    background-position: contain;
    position: relative;
    margin: 0 20px 0 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px 5px;

    &-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
    }

    &-design-1{
      height: 70vh;
      width: 40vw;
      background-color: $color-nav-blue;
   
  }

   &-design-2{
      height: 70vh;
      width: 40vw;
      background-color: $color-white;

    }
   &-design-1,
   &-design-2 {
    opacity: 0;
    transition: opacity .25s ease-out;`
   }

&:hover{
  .cards-animation-1, 
  .cards-animation-2 {
    opacity: 1; 
    transition: opacity 0.25s ease-in;
  }
}

}