Pravin Varma

After transforming objects in CSS we are now ready to learn animation. In CSS3, different properties of an object(An HTML element) can be animated by using animation property. There are different sub-properties of animation for specifying animation duration, animation name, animation delay, animation direction etc. For defining animation we use @keyframes rule. The rule describes how the element shall render at a given time in the animation sequence.  Lets check a simple code-

First, lets create a div with a header inside to name it.
<div id=”rotate”><h1>This is test</h1></div>

Next, will create a CSS rule for this div element and define the animation name and its duration.
div#rotate{
animation: rotateMe 1s;
-webkit-animation: rotateMe 1s;
width:200px;
height:100px;
background:yellow;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
}

We are specifying the animation properties with its name as rotateMe and of the duration of one second for webkit browsers. Then we have specified the height, width and background color, then in the last two lines we have defined the acceleration of the animation.

We have to define keyframes for this animation to work.

@keyframes changeColor
{
from{ transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
}
@-webkit-keyframes changeColor{
from { transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg),;-webkit-transform:rotateZ(360deg);}
}

We have specified the name of the animation as change Color which we have defined in the rotate id. Then we have specified the properties to animate with their start and end values, i.e. we are rotating the element along z-axis from 0 to 360 degree which is complete rotation. Here is the complete demo.

CSS transform allow us to transform elements in 2D or in 3D space.  With transform property you can scale, skew, translate and rotate an element. The transformations occurs at the current position in the coordinate system of the element which can be 2D or 3D. However, you can change the position of the transformed element by using transform-origin property. The syntax fortransform-origin is

2D transform-origin: x,y;  |  3D: transform-origin: x,y,z;

You will need to use vendor prefixes while using these properties since it is still in a draft mode(2012). For translating an element 20 pixels on right and 30 pixels at the bottom we will need to write the CSS styles like below.

transform:translate(20px, 30px);
-ms-transform:translate(20px, 30px); // IE
-webkit-transform:translate(20px, 30px); //Chrome, Safari
-moz-transform:translate(20px, 30px);//FF
-o-transform:translate(20px, 30px);//Opera

To skew an element by 30 degree along x-axis we will have to write the following lines-

transform:skew(30deg, 0deg);
-webkit-transform:skew(-30deg, 0deg);
-moz-transform:skew(30deg, 0deg);
-o-transform:skew(30deg, 0deg);

To scale an element twice of its current width we will have to write the following styles

transform:scale(2,1);
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-o-transform:scale(2,1);

You can check the demo of  all the transformation properties here

In the past posts, we see that our navigation is taking the entire viewing space. To optimize the navigation we can take help of jQuery’s hide() and show() functions. Check the Demo here with the explanation given below.

$(document).ready(function(){
if($(‘.navigationWrap’).width()<480)
{
$(‘.navigationWrap’).hide();
$(‘.menuBtn’).css(‘display’,’block’);
} else
{
$(‘.navigationWrap’).show();
}
$(window).resize(function(e) {
if($(‘.navigationWrap’).width()<480)
{
$(‘.navigationWrap’).hide();
$(‘.menuBtn’).css(‘display’,’block’);
}
else
{
$(‘.menuBtn’).hide();
$(‘.navigationWrap’).show();
}
});
$(‘.menuBtn’).click(function(e) {
$(‘.navigationWrap’).slideToggle();
});
});

On loading the document, we are checking if the size of the navigation wrapper is less than 480px i.e. if the screen size of the device in which the document is currently being viewed is less than 480px. If it is true then we are hiding the navigation and showing an anchor as a Menu button which will act as a toggle button.

I have written one more event handler function for window re-size. I have used the same logic for this block also that is used in the onReady. In the end I have applied a slideToggle function to the navigation Wrapper on click() event for the menu button. With this code we have optimized the screen for small devices.

You might have used the media attribute while attaching styles to target screen or sometimes to target printer by using ‘screen’ and ‘print ’ media types. Brallie, handheld, projection etc are the media types along with the above two that were supported in CSS2 and HTML4. By using these media types you can target any specific media. CSS3 introduces a new feature to make things responsive called as Media Query. It checks for the certain  attribute  like width, height and color and applies the respective stylesheet. For example-

<link rel=”stylesheet”   media=”screen and (color)”   href=”stylesheet.css” />

The above line means that the styles stylesheet would be applied to the media type of screen and the media must be color screen. Media Query is a logical expression which is either true or false.  If it is true respective stylesheet would be applied. So we can have Media Queries depending on the type of devices we are wishing to target. Consider the following example-

<link rel=”stylesheet”   media=”screen and  (min-width:320px) and (max-width:480px) href=”stylesheet.css” />

The above stylesheet is applied to the document only if the device screen size is 320px or more than that and less than 480px. Note that the use of ‘and’, It is actually working as logical AND. For logical OR we can use comma.  Like color in the first example, we have used min-device-width and max-device-width. These are the features that we use in the Media Query to test about the certain feature of the targeted device based on which the stylesheet is applied. Most of the features accepts ‘min-‘ and ’max-’ prefixes . The complete list of the features is listed below

1. Width
2. Height
3. Device-width
4. Device-height
5. Orientation
6. Aspect ratio
7. Device-aspect-ratio
8. Color
9. Color-index
10. Monochrome
11. Resolution
12. Scan
13. Grid

I am attaching a demo to get the idea about the power of Media Query to make the things responsive. If you are checking this demo on Google’s Chrome, you can either re-size your browser window or click on the settings button at the bottom right of the developer toolbar. Select the User Agent and device metrics. If you are checking the demo on any smart phone, then let me know your feedback. I am continuing this topic in the next post to explore the above listed features.

CSS3 includes transition properties which helps to make certain element to change its current state to a new one in a smooth manner. We see navigation bar at the top of many website. When we hover any link we see many times the background changes  in quick time. With CSS3 transition properties we can animate this change smoothly. Let’s see how can we achieve this..

CSS3 provides us four properties-

1. transition-property
2. transition-duration
3. transition-delay
4. transition-timing-function

Since these are new properties included in CSS3, browsers support this feature with their prefixes,  for chrome we need to use -webkit- prefix with each property.

Let’s start with out HTML code for navigation.

<ul id=”navigation”>
<li><a href=”javascript:void(0)”>Home</a></li>
<li><a href=”javascript:void(0)”>About</a></li>
<li><a href=”javascript:void(0)”>Contact</a></li>
</ul>

We have three menu items in our menu bar with the id ‘navigation’. Let’s add styling for these menu items to align in one line and to have smooth transition effect on hover state.

ul#navigation {
list-style:none;
}

ul#navigation li {
float:left;
}

ul#navigation li a {
background:#006600;
display:inline-block;
padding:10px 100px;
text-decoration:none;
color:#FFF;
-webkit-transition-property:background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function:ease;
}

ul#navigation li a:hover {
background:#00CC33;
}

In the CSS styles we are animating background color of the menu item by using transition-property. The second line -webkit-transition-duration:1s specifies that the transition will take one second to shift from old value to a new value. The third line -webkit-transition-timing-function:ease; specifies how the transition will change its speed over its duration.

Now we have to specify a hover style in which we have specified a different color. When we will roll over any of the menu item, the background color of that menu item will change from the default color to the color specified in the hover style in a smooth manner. Here is the final demo.