複数のプロパティのCSSアニメーション

Question

CSSのキーフレームを使用して、要素のボトム位置と不透明度を同時にアニメーション化したいと考えています。

要素の不透明度はアニメーション化されていますが、下位の位置はアニメーション化されていません。

.custom-fade-down{ 
-webkit-animation: 23s ease 0s normal forwards 1 custom-down; 
-moz-animation: 23s ease 0s normal forwards 1 custom-down; 
    animation: 23s ease 0s normal forwards 1 custom-down; 
} 

@keyframes custom-down { 
    from { 
     opacity: 0; 
     bottom: 10px; 
    } 

    to { 
     opacity: 1; 
     bottom: 1px; 
    } 
} 

Answer 1

解決策は近いです。 position: relative;を.custom-fade-downクラスに追加して、bottomプロペラが有効になるようにします。

$('div').addClass('custom-fade-down');

.custom-fade-down { 
 
    width: 100px; 
 
    height: 100px; 
 
    bottom: -100px; 
 
    background-color: black; 
 
    -webkit-animation: 23s ease 0s normal forwards 1 custom-down; 
 
    -moz-animation: 23s ease 0s normal forwards 1 custom-down; 
 
    animation: 23s ease 0s normal forwards 1 custom-down; 
 
} 
 

 
@keyframes custom-down { 
 
    from { 
 
    opacity: 0; 
 
    bottom: -100px; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    bottom: 0px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative;"></div>