CSS: Tansform and Transition – Get Started

Vendor Prefixes

CSS transition and transform are currently in experimental stage. So, it should be used with the vendor prefixes. Below is the prefixes for different browsers:


  -ms- //Internet Explorer
  -o- //Opera
  -wekit- //Chrome and Safari
  -moz- //Mozilla Firefox 

But we should also insert the css property without the vendor prefix. So that you dont need to modify it in future when browsers will support these experimental css properties. Like if we wish to rotate some div by 30 degree, then we should write style as :


div
{
  -ms-transform : rotate(30deg); //Internet Explorer 10 (hopefully)
  -o-transform : rotate(30deg); //Opera
  -webkit-transform : rotate(30deg); //Chrome and Safari
  -moz-transform : rotate(30deg); //Mozilla Firefox
  transform : rotate(30deg); // To make your style future proof
}

This was a brief idea about how and why to use vendor prefixes for the css transition and transform. Now lets move on to css transition.

Transition

CSS 3 transition can be used for adding effect while changing from one style to another. But all the CSS styles can not be used for the transition effect. Please refer this resource to get all list of CSS properties which can be animated.

Knowingly or unknowingly we have been using transition effects in terms of hover.So we will use the same for learning different css transition properties.

Now lets start with some real code and examples. We will learn CSS transition in steps.And yes you can check the demo of these examples on the provided links.

Step 1 : Changing background and color on mouse hover
Lets create a button having class as scriptstockBtn


<button class="scriptstockBtn">ScriptStock</button>

Then we will write the style for buttons as


.scriptstockBtn
{
  background-color: #4a060f;
  padding: 5px 10px;
  color: #FFF;
  font-weight: bold;
}

Now if we wish to change the background color and text color of the button on mouse hover then we can style it as:


.scriptstockBtn:hover
{
  background-color: #140b4a;
  color: #cbae1c;
}

What it does ? It changes the background color and text-color on hover.

Now if we wish to change this into a 10 second animation for background color change.So now our target is to

– Change the background-color from #4a060f to #140b4a
We need let the browser know that it has to change the background property. To do this we should add “transition-property: background-color” in our style.

– duration for change should be 10 seconds
We need let the browser know that it has to change the property in the duration of 10 secs. To do this we should add “transition-duration: 10s” in our style.

Note – Dont forget to add the vendor prefixes for the transition-property and transition-duration.

After adding these changes our css for the button will look something like


.scriptstockBtn
{
  background-color: #4a060f;
  padding: 5px 10px;
  color: #FFF;
  font-weight: bold;
  
  -o-transition-property: background-color;
  -ms-transition-property: background-color;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  transition-property: background-color;
  
  -o-transition-duration: 10s;
  -ms-transition-duration: 10s;
  -webkit-transition-duration: 10s;
  -moz-transition-duration: 10s;
  transition-duration: 10s;
}

Check the demo here here.

This was the our first 10 mins learning session. We will learn more about transition in the upcoming sessions.

Keeep visiting.

Advertisements
Posted in CSS, HTML, Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: