Question

我使用像这样的css变换将幻灯片放在幻灯片中心

.img .inpo {
   border-color: red;
    border-style: solid;
    border-width: 5px;
    padding:5px;
    width: auto;

    z-index:5;
   margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%); 
   -ms-transform: translate(-50%, -50%); 
   -o-transform: translate(-50%, -50%); 
   transform: translate(-50%, -50%); 
}

但问题是我想在每个幻灯片上淡化这个div，所以我使用animate.css并将其应用于幻灯片

.slick-active .inpo{

   animation:fadeInDown 1s both 1s;
}

这打破了中心div。我对fadeIn没有任何问题但是使用fadeInDown

fadeInDown也使用css转换：

  @-webkit-keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }

      to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
      }
    }

    .fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
    }

所以我想知道是否有人知道如何在带有变换的中心div上使用变换动画

Answer 1

当您在中心transform上声明属性div时，它仅包含值translate(x,y)。

当您在其上使用动画时，transform translate3d以及none后面会有一组新的值。

如果您想保留原始transform值，则必须将其包含在动画中声明的transform中。否则，这将覆盖原始规则中的任何值。

您未使用translate3d的Z值，因此我只需删除它并使用translate。使用以下动画来修复它：

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }

  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

请务必为-webkit-版本添加相同内容。

使用CSS转换

1 个答案: