關于css transition的問題

div.rightImg{
    width: 80px;
    height: 80px;
    margin-left: 20px;
    float: left;
    position: relative;

    &:hover .bigImg{
      width: 180px;
      height: 180px;
      opacity: 1;
      filter: alpha(opacity = 100);
      transform: translateX(0);
    }

    img{
      width: 100%;
    }

    .bigImg{
      opacity: 0;
      filter: alpha(opacity = 0);
      width: 0px;
      height: 0px;
      position: absolute;
      left: -182px;
      top: 0;
      z-index: 10;
      transition: opacity .25s ease-in, transform .25s ease-in;
      transform: translateX(30px);

      img{
        width: 100%;
      }
    }
 }

HTML結構如下。

<div class="right border">
  <div class="rightImg">
      <img src="./images/QRcode.png" alt="">
      <div class="bigImg">
          <img src="./images/QRcode.png" alt="">
      </div>
  </div>
</div>

這段代碼 為什么 鼠標移入的時候有動畫 移除沒動畫了。 要是把 transition 的第一個屬性改成 all才行 但是我不想改成 all 怎么辦？