CSS 过渡 Twitter 的 Bootstrap 3答案

【问题标题】：CSS Transtions Twitter's Bootstrap 3CSS 过渡 Twitter 的 Bootstrap 3
【发布时间】：2014-01-13 07:15:17
【问题描述】：

我想在我的 css 中添加过渡以实现流畅的响应操作，但似乎无法让它工作。谁能启发我？我需要覆盖一些东西吗？

    body{
    padding-top: 60px;
     transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

从这里开始阅读：http://www.w3schools.com/css/css3_transitions.asp

CSS3 过渡是让元素逐渐从一种样式变为另一种样式的效果。

所以你已经定义了样式变化。

效果会在指定的 CSS 属性值改变时开始。一个典型的 CSS 属性 >change 是当用户将鼠标悬停在一个元素上时：

通常使用 :hover 来触发更改。例如Triggering CSS3 Transform on browser resize 显示你，也可以使用媒体查询来触发样式更改。

所以先定义效果、持续时间等：

body{
     padding-top: 0px;//begin state, you don't have to declare this cause 0px is default

     transition:padding-top 2s linear; 
    -o-transition:padding-top 2s linear; 
    -moz-transition:padding-top 2s linear; 
    -webkit-transition:padding-top 2s linear;
}

注意用 padding-top 替换所有内容。使用 all 将检查所有可能样式的更改，请参阅：http://msdn.microsoft.com/en-us/library/ie/dn254934(v=vs.85).aspx 以获取它们的列表，这会花费不必要的计算时间。

第二个定义你的风格变化：

@media screen and (max-width: 767px){
    body{
          padding-top: 200px;
    }
}

见：http://bootply.com/105331

【讨论】：