CODEWITHSUNDEEP
csstwitter-bootstrap-3
JayD
JayD

Reputation: 6521

CSS Transtions Twitter's Bootstrap 3

I wanted to add transitions to my css for smooth responsive action but cant seem to get it to work. Can anyone enlighten me ? Do i need to override something ?

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

Upvotes: 0

Views: 81

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

start reading here: http://www.w3schools.com/css/css3_transitions.asp

CSS3 transitions are effects that let an element gradually change from one style to another.

So you have define the style change.

The effect will start when the specified CSS property changes value. A typical CSS property >change would be when a user mouse-over an element:

Often a :hover is used to trigger the change. For example Triggering CSS3 Transform on browser resize shows you, also a media query can be used the trigger the style change.

So first define the effect, duration etc.:

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;
}

Note a replace all with padding-top. using all will check changes for all possible styles, see: http://msdn.microsoft.com/en-us/library/ie/dn254934(v=vs.85).aspx for a list of them, which take unnecessary computation time.

second define your style change:

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

see: http://bootply.com/105331

Upvotes: 2

Related Questions