如何使項目與css3動畫下降

Question

我正在進行關於CSS 3動畫的練習。我被困在如何保持項目全速下降的頁面，而不需要用戶使用鼠標跟着它而不訴諸於JavaScript。所以當你將鼠標懸停在盒子上時，盒子會掉下來。

這裏是我的代碼：

<p class="exp9"><strong>box</strong></p> 

strong { 
    margin-top: 20em; 
} 

p:hover strong { 
    display: block; 
} 

p:hover strong:hover { 
    margin-top: 20em; 
} 

我的代碼只是使箱內文本降了下來。任何想法？謝謝

Answer 1

使用此

/*newly added items start faded out and translated 400px upwards on the y-axis*/ 
li.new-item { 
    opacity: 0; 
    animation: new-item-animation .3s linear forwards; 
} 

@keyframes new-item-animation { 
    from { 
     opacity: 0; 
     transform: translateY(-400px); 
} 

    to { 
     opacity: 1; 
     transform : translateY(0); 
    } 
} 

Answer 2

這裏是你可以做什麼的例子：

<div class="box"> 
    <p class="innerbox"> 
     Hover 
    </p> 
</div> 

CSS：

.innerbox 
{ 
    Width:150px; 
    height:20px; 
    background-color: lightBlue; 
    Text-align: center; 
    Padding:10px 0px; 
} 

.box 
{ 
    Display:inline-block; 
    Transition: 0.3s 0s All linear; 
} 

.box:hover 
{ 
    Padding-top:20em; 
} 

在HTML的背景：

strong 
{ 
    Text-align: center; /* this makes it more aesthetic */ 
    Padding:10px 20px; /* this makes the text more easy to hover over */ 

} 

p 
{ 
    Display: inline-block; /* this is so the box doesn't stretch the width of the page */ 
    Transition: 0.3s 0s all linear; 
} 

p:hover 
{ 
    padding-top: 20em; 
}