CSS Styling
CSS3 has made the web a much more dynamic place with support for transitions and animations. CSS Animations like transitions is still developing as a standard, so in all examples we’re giving here you should add a prefix for each browsers and Firefox. Animation are used in abundance on the web, it’s only a matter of time. Previously even simple animations in HTML required complex JavaScript code, and most complex animations needed flash. Of course JavaScript is still incredibly useful if there has to be any form of interactivity, but new CSS3 features take a lot of the pain away. Let’s look at two CSS3 modules – Transitions and Animations.
CSS Transitions
The “:hover” selector in CSS already made it possible to make a page layout dynamic without requiring any JavaScript. Essentially, the “:hover” selector can be used to define the CSS styling of an element when a mouse hovers over it. It can be used to change the font size, the font/background color, the border size/color type etc. Try this; create a HTML file with just the following in it –
<! DOCTYPE html>
<html>
<head>
<title>Playing with CSS3</title>
<style type=”text/css”>
#div1
{
Background-color:blue;
}
#div2
{
Border: solid thin black;
}
#div1:hover
{
Background-color:red;
}
#div2:hover
{
Border: dashed thick black;
}
#div3:hover
{
Font-size: 28px;
}
</style>
</head>
<body>
<div id=”div1”> Background color sample</div>
<div id=”div1”> Border sample</div>
<div id=”div1”> Font sample</div>
</body>
</html>
If you save this in an HTML file you’ll see three rows. The first row is written in black on blue background, the second has a border, and the final one is just plain text. On moving your mouse over any row the formatting changes. The first row’s background becomes red, the second row’s border style changes and the third row’s font size increases. You may notice that this change is rather jerky. Now change the above styling for “div1 as follows –
#div1
{
Background-color:blue;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s
Transition-duration: 3s;
}
When you hover your mouse over the first line, the color will smoothly go from blue to red. You’ll notice we have “transition-duration” multiple times with different prefixes. To know why this is needed because, each browser engine uses a different prefix; Mozilla’s Gecko engine in Firefox uses a prefix of “-moz-”, Opera uses “-o-”, and Microsoft’s Internet Explorer uses “-ms-” prefix. Since Safari and Chrome use the same engine (Webkit), their prefix is also the same “-webkit-“. Initially to use the same CSS feature on multiple browsers, you’ll need to define the same property multiple times – once for each browser. However, eventually the prefix will be dropped, and you will be able to use the same feature on all browsers. Since prefixes will be eventually dropped, it’s a good idea to define the property without a prefix as well, to ensure it continues working even when the prefix is dropped.
Now get back to the example here we have given you, in this example, all we gave was the duration of the transition, i.e. three seconds, and the browser automatically animated all changed properties – those that are possible to animate obviously. A number of CSS properties can be included in this transition, and it’s even possible to specify which properties to change, and durations and easing functions for each. Now look at the small example. Here on mouse hover we will change the Font and background color, and add a shadow. We will animate the background color change over two seconds and the shadow over 500 milliseconds, but we will not animate the Font color. Here is the relevant part of the code –
<div id=”div1”> Just a simple sentence for testing purpose</div>
CSS Part:
#div1
{
background-color: rgb(204, 204, 204);
transition-property: box-shadow, background-color;
transition-duration: 500ms, 2s;
}
#div1:hover
{
Box-shadow: 3px 3px 4px 1px black;
Color: rgb(255, 255, 255);
Background-color: rgb(102, 102, 102);
}
But you need to add proper prefix at transition property to make this code work properly, we have left it out to avoid redundancy in code.
After “transition-property” we have a comma separated list of properties that we wish to animate: after “transition-duration” we are providing the transition durations for each specified properties. If we had specified only one duration, it would be used for all properties. There are two more properties of transitions –
1) Transition-delay: you can use this to specify a delay before the animations is triggered.
2) Transition-timing-function: this function is used to calculate intermediate values between the two transition points. Predefined ones are ease, linear, ease-in, ease-out, ease-in-out. Or you can specify your own via cubic-bezier (a, b, c, d) where a, b, c, d are numbers.
Transitions need not to be triggered only on hover, if the CSS styles of an element change under other conditions, clicking for example, they will be animated if a transition is specified.
CSS Animations
Transition and animation share a lot of similar concepts, so let’s first look at the common elements. Just like transitions, animations have duration (“animation-duration”), a delay (“animation-delay”) and a timing function (“animation-timing-function”). Animations have two components – first, a description of the animation and second, a set of key-frames that define how the animation occurs over time. Animations are executed immediately on all elements matching their CSS selector. This might not be desirable if you wish to apply an animation when someone clicks on a Play Button. For that, you will need to use JavaScript to apply the animated class then required. Here is how you can specify an animation on a div with an id of animated –
CSS Part:
#animated
{
animation-name: test-animation;
animation-duration: 4s;
animation-delay: 3s;
animation-iteration-count: 10;
animation-direction: alternate;
}
Here, we’re specifying an animation name, duration of four seconds, and a delay of three seconds. Via the iteration count we’re specifying that the animation has to run 10 times. The animation-direction property is set to “alternate” to specify that the animation must reverse when completed. Thus the animation will go forward and in the subsequent iteration will play backwards, and so on.
This of course, has said nothing of what the animation itself will look like. That we specify using the “@keyframes” keyword as follows –
CSS Part:
@keyframes test-animation
{
from { width:10px; height: 4px;}
25% { width: 50px; height: 4px }
to { width: 50px; height: 200px }
}
That is. @keyframes followed by the name of the animation. These set of keyframes will accomplish the following –
1) In the beginning, the height and width of div will be set to four pixels, and 10 pixels respectively.
2) From the beginning to 25 percent of the way through the animation, i.e. after 1 second, the width will increase to 50 pixels, but the height will remain the same.
3) From 25% till the end of the animation, the width will remain the same, but the height will increase to 200 pixels.
Now let’s create a small animation of a red square moving between two points –
CSS Part:
#animated
{
animation-name: test-animation;
animation-duration: 4s;
animation-delay: 3s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: linear;
background-color: red;
border: thin solid black;
width: 20px;
height: 20px;
position: absolute;
}
@keyframes test-animation
{
from { left: 0px;}
50% { left: 300px; width: 50px }
to { left: 600px;}
}
This will bounce the square between 0px and 600px, while increasing the width to 50px in the middle. CSS Animation like transitions, is still developing as a standard, a standard in only useful if it is implemented, however, standards are often implemented even before they’re fully defined.
