CODEWITHSUNDEEP
jqueryhtmlcss
Web Dev Guy
Web Dev Guy

Reputation: 1799

Css transition left and right position for one element

So I have the following css code:

#masthead {
    transition: left linear 0.25s;
    -moz-transition: left linear 0.25s;
    -o-transition: left linear 0.25s;
    -webkit-transition: left linear 0.25s;
    -ms-transition: left linear 0.25s;
    transition: right linear 0.25s;
    -moz-transition: right linear 0.25s;
    -o-transition: right linear 0.25s;
    -webkit-transition: right linear 0.25s;
    -ms-transition: right linear 0.25s;
}

I would like to transition both left and right positions. But it's not working as expected. I realise this is because I can't have the same property declaration in the css selector.

So I thought maybe I could do this, but it's still not working :(

#masthead {
    transition: left, right linear 0.25s;
    -moz-transition: left, right linear 0.25s;
    -o-transition: left, right linear 0.25s;
    -webkit-transition: left, right linear 0.25s;
    -ms-transition: left, right linear 0.25s;
}

I also tried: transition: all linear 0.25s; but here is the problem, when the page is scrolled the header becomes sticky and there is a top bar 25px high at the top of the header. so the header transitions to the top when the topbar is hidden on scroll. I also have to off canvas menus which slide out on the left and right side, and when they do the header gets pushed to the left or right depending on which off canvas menu is triggered.

It is the pushing of the header left or right, with position: left/right which I want to trigger. But not the position: top

How would I go about this.

W3schools doesn't seem to provide the solution. I think it may not be possible.

Cheers

Upvotes: 0

Views: 1077

Answers (1)

JFC
JFC

Reputation: 586

You just need to repeat the attributes. So instead of 

transition: left, right linear 0.25s;

try 

transition: left linear 0.25s, right linear 0.25s;

Upvotes: 1

Related Questions