動畫在中心事業部使用CSS變換

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在幻燈片，但問題是，我想淡出下來這個div每張幻燈片上，所以我使用動畫.css並將其應用在幻燈片上

.slick-active .inpo{ 

    animation:fadeInDown 1s both 1s; 
} 

並打破了中心div。我沒有任何問題，淡入但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

當您在居中的div上聲明屬性transform時，它僅包含值translate(x,y)。

當您在其上使用動畫時，transform有一組新值：translate3d及更高版本none。

如果您想保留原始的transform值，您將不得不將其包含在動畫中聲明的transform中。否則，這將覆蓋原始規則中的任何值。

您沒有使用Z值translate3d，所以我只是放棄它並使用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-版本。