如何在鼠標懸停上使用css或bootstrap向右添加動畫？

Question

我正在使用引導程序3.我想要的東西就像鼠標懸停在區域區域上，一個特殊的div（這裏是我的代碼ABC）應該與右到左的動畫一起出現，並在鼠標移除時消失。我做到了，但沒有動畫。如何添加動畫？如果任何人有任何想法，請幫助我。我已經bootply創建的，你可以看到here

鏈接：http://www.bootply.com/PTgHapKmv3

我的代碼如下：

HTML

<section id="top"> 
    <div class="container-fluid"> 
     <div class="row">     
      <div class="col-sm-6">       
       <h1><strong>CONNECTING</strong></h1> 
      </div> 
     </div>  
     <div class="col-sm-6"> 
      <div class="fostering"> 
      <div class="row pad-top4" id="fostering">     
        <h3>ABC</h3>     
      </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

#top { 
background: yellow; 
    height:200px; 
} 
#fostering { 
    display: none; 
} 
#top:hover #fostering { 
    display: block;  
} 

Answer 1

我認爲這應該幫助：

CSS

#fostering { 
    display: none; 
} 

#fostering h3{ 
    margin-right:0px; 
} 

#top:hover #fostering { 
    display: block;  
} 

#top:hover #fostering h3{ 
    margin-right:100px; 
    transition:2s; 
    -webkit-transition:2s; 
    -moz-transition:2s; 
}