Saturday, 11 April 2015

CSS3 Explained with live example ? Why it is required?


SEE LIVE Example

What are CSS3 Animations?

The CSS animation feature was introduced into Webkit in 2007. In 2009 a working draft was written and added to the w3c site.
To use CSS animation, the most important and key concept is key-frames.you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the rest for you.
Animation is the process of creating motion and shape change or in real , illusion by means of the rapid display of a sequence of static images that minimally differ from each other. An animation lets an element gradually change from one style to another.
If you want to achieve such motion or movement of elements on web  using css3 (rather than depending on tools like flash,silverlight..) you can define it as CSS3 animation  You can change as many CSS properties you want, as many times you want.To use CSS3 animation, you must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times .

Why CSS3 includes animation?

People who have experienced or worked with web they will definitely realize that animation was possible only by using heavy tools like flash ,silverlight..which was more about moving web experiences/website designing to software development components… In other words, we were using above mentioned tools for creating animation components which was heavy ,dependent and cumbersome experience.I don't disagree that Flash, Silver-light, AJAX, CSS – are all merely tools and all of them powerful in their own way – all of them appropriate for certain application.
It is really great and very exciting that CSS3 styling language has support for Animation – Agree,we still have to wait bit to see how the standard is implemented across all browsers
Finally leaving all religious favor-ism to tools  ,we have to agree css3 with animation is big change in web experience and will give boost to web experience

CSS3 ADVANTAGES:


There are mainly three key advantages over traditional Flash/silverlight and JS script-driven animation techniques:
  1. CSS3 Animation is declarative and easy to use for simple animations; you can create them without even having to know JavaScript.
  2. The animations run well because rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
  3. Giving power to browser for control the animation sequence which is surely optimized and efficient, for example, reducing the update frequency of animations running in tabs that aren't currently visible.


The Building Blocks of Animations

CSS animations are made up of two basic building blocks.
  1. Keyframes - define the stages and styles of the animation.
  2. Animation Properties - assign the @keyframes to a specific CSS element and define how it is animated.

1 )@keyframes

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.To make an animation work on webpage, we must bind bind the animation to respective element like div,span,image...
Let us take simple example to understand css3 animation
The following example binds the "example" animation to the <div> element. The animation will lasts for 4 seconds, and it will gradually reduce the width   of the <div> element from 100px to 10px:

SEE LIVE Example


 


After change animation-count property to infinite




<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {width: 400px;}
to {width: 10px;}
}

/* Standard syntax */
@keyframes example {
from {width: 400px;}
to {width: 10px;}
}
</style>
</head>
<body>


<div></div>

<p><b>See:</b> When an animation is over, it will return its  original style.</p>

</body>
</html>
In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).


2: Animation Properties

Once the @keyframes are defined, the animation properties must be added in order for your animation to function.
Animation properties do two things:
  1. They assign the @keyframes to the elements that you want to animate.
  2. They define how it is animated.
The animation properties are added to the CSS selectors (or elements) that you want to animate. You must add the following two animation properties for the animation to take effect:
  • animation-name: The name of the animation, defined in the @keyframes.
  • animation-duration: The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).

Delay an Animation

The animation-delay property specifies a delay for the start of an animation.The following example has a 3 seconds delay before starting the animation:
Example
div {
    width: 400px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 3s;
}

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run.
The following example will run the animation 5 times before it stops:
Example
div {
   width: 400px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 5;
}

The following example uses the value "infinite" to make the animation continue for ever:
Example
div {
   width: 400px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property is used to let an animation run in reverse direction or alternate cycles.
The following example will run the animation in reverse direction:
Example
div {
    width: 400px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}

The following example uses the value "alternate" to make the animation first run forward, then backward, then forward:
Example
div {
    width: 400px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

Specify the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the animation.
The animation-timing-function property can have the following values:
  • ease - specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear - specifies an animation with the same speed from start to end
  • ease-in - specifies an animation with a slow start
  • ease-out - specifies an animation with a slow end
  • ease-in-out - specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can be used:
Example
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

How to use CSS3 animation


All in one example


The animations presented below involve setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation to take place incrementally over a set time period.

This is all illusion what we are creating with below sprite image with all possible steps of human while walking. you can choose horse,tiger .. any sprite image and find same animation.In reality we are showing one image at once with small small delay,which make feeling like an object is walking.
Let's get the  use for step easing out of the way: sprite animation.  The implementation is simple: jump the position of a background-image (which has all the frames of an animation laid out side-by-side) so that we see one "frame" at a time:



 

Steps()

The steps() function controls exactly how many keyframes will render in the animation time-frame.

Complete Stunning Example


<html>
<head> 
<title>Hello this is test</title>
<style>
    .runninggirl {
        margin-left: 400px;
        width: 68px;
        height: 100px;
        background-image: url("http://www.shabirhakim.net/img/ladyrun.png");
        -webkit-animation: play .8s steps(5) infinite;
        -moz-animation: play .8s steps(5) infinite;
        -ms-animation: play .8s steps(5) infinite;
        -o-animation: play .8s steps(5) infinite;
        animation: play .8s steps(5) infinite;
    }

    @-webkit-keyframes play {
        from {
            background-position: 0px;
        }

        to {
            background-position: -500px;
        }
    }

    @-moz-keyframes play {
        from {
            background-position: 0px;
        }

        to {
            background-position: -500px;
        }
    }

    @-ms-keyframes play {
        from {
            background-position: 0px;
        }

        to {
            background-position: -500px;
        }
    }

    @-o-keyframes play {
        from {
            background-position: 0px;
        }

        to {
            background-position: -500px;
        }
    }

    @keyframes play {
        from {
            background-position: 0px;
        }

        to {
            background-position: -500px;
        }
    }
</style>
</head>

<body>
<div class="runninggirl">
</div>
</body>
</html> 

SEE LIVE Example

 More Resources