CODEWITHSUNDEEP
csshtmlanimationresponsive-designtransition
NLimbu
NLimbu

Reputation: 151

CSS Transitions: move to the right

I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.

Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1

I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?

Upvotes: 0

Views: 3986

Answers (3)

Coded Container
Coded Container

Reputation: 863

I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.

With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.

Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.

Hope I could help.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

You can do this by using a mixture of CSS3 transitions and the @media queries.

div
{
  height: 100px;
  width: 200px;
  position: relative;
  background-color: #eee;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

@media all and (min-width: 400px) {
  div
  {
    background-color: #fc3;
    left: 100px;
  }
}

What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.

Obviously you need to change the values to what you need, but this is how it should be done.

http://jsfiddle.net/AvhvD/

Upvotes: 2

simoncereska
simoncereska

Reputation: 3043

Here is how i would do:

1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: @media (...) { 
  .logo {
    margin-left: 0;
  }
}

Upvotes: 0

Related Questions