CSS3 Transition

Have you ever visited a website on your mobile device (assuming it's yours or a friend's one) on a portrait and then switch to landscape? Have you noticed a nice smooth transition effect? or it was more a from a to point b type of thing?

Well if you wonder how to visually transition from a landscape view to a portrait view, here's how.

The setup is pretty easy. Simply choose an element you want to transition, for example H1 HTML tag and then apply the CSS for it.

HTML

<h1>Transition Text</h1>

CSS

* {
  margin: 0;
  padding: 0;
}
html,body {
  height: 100%;
}

body {
  background: #422A20;
  margin: 0;
  padding: 20% 0 0 0;
  width: 100%;
}

h1 {
  -moz-transition: all 1s linear 0s;
  -o-transition: all 1s linear 0s;
  -webkit-transition: all 1s linear 0s;
  color: #fff;
  display: block;
  font-size: 225%;
  margin: 0 auto;
  text-align: center;
  width: 95%;
}

@media screen and (min-width: 1025px) {
  h1 {
    font-size: 400%;
  }
}

For this example, if your resolution is greater than 1025 pixels, you will see the text taking almost all the width of the page. Once you resize the window to less than 1025 pixels you will see the text shrinking and at the same time see a nice smooth transition.

How that works?

First here's the syntax:

transition: property duration timing-function delay;

In this demo, the transition is set to use all the properties (All properties that can have an animated transition will do so). Then, the duration is set 1 second (The transition will last for 1 second). After this, the timing-function is set to linear. Here's the specifications:

• linear: Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
• ease: Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
• ease-in: Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
• ease-out: Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
• ease-in-out: Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
• cubic-bezier(n,n,n,n): Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

Then finally, the delay is set to 0 seconds, well as you know it starts right away.

You can find all the information about transition on the mozilla website.