Flash like animation: Number Counter

We have seen several digital electronics devices , they are using 7 pieces in their device to represent every numbers,that idea is what i used behind this animation .The animation for countdown of the numbers(which is above) is developed using pure CSS. We can make digital clocks using this type of animation.

-No Images

-No JavaScript
-No HTML5
-No Flash
Pure CSS (CSS3)

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/******************************/

.element_1{         /*left_top*/
background-color:#000000;
position:absolute;
width:10px;
height:100px;



left:250px;
top:200px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */


animation:el_one 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_one 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_one 10s infinite;
-webkit-animation-timing-function: linear;


}

.element_2{       /*left_bottom*/
background-color:#000000;
position:absolute;
width:10px;
height:100px;
left:250px;
top:314px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */


animation:el_two 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_two 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_two 10s infinite;
-webkit-animation-timing-function: linear;


}

.element_3{       /*center_top*/
background-color:#000000;
position:absolute;
width:10px;
height:70px;
left:290px;
top:157px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */

transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
-moz-transform: rotate(90deg); /* Firefox */


animation:el_three 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_three 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_three 10s infinite;
-webkit-animation-timing-function: linear;


}

.element_4{      /*center_mid*/
background-color:#000000;
position:absolute;
width:10px;
height:70px;
left:290px;
top:272px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */

transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
-moz-transform: rotate(90deg); /* Firefox */


animation:el_four 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_four 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_four 10s infinite;
-webkit-animation-timing-function: linear;



}

.element_5{     /*center_bottom*/
background-color:#000000;
position:absolute;
width:10px;
height:70px;
left:290px;
top:387px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */


transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
-moz-transform: rotate(90deg); /* Firefox */


animation:el_five 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_five 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_five 10s infinite;
-webkit-animation-timing-function: linear;


}

.element_6{    /*right_top*/
background-color:#000000;
position:absolute;
width:10px;
height:100px;
left:330px;
top:200px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */

animation:el_six 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_six 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_six 10s infinite;
-webkit-animation-timing-function: linear;


}

.element_7 {   /*right_bottom*/
background-color:#000000;
position:absolute;
width:10px;
height:100px;
left:330px;
top:314px;
border:2px solid #FFFFFF;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */


animation:el_seven 10s infinite;
animation-timing-funtion:linear;
/* Firefox */
-moz-animation:el_seven 10s infinite;
-moz-animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:el_seven 10s infinite;
-webkit-animation-timing-function: linear;

}




@keyframes el_one
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#FFFFFF;}
20% { background-color:#FFFFFF;}
22% { background-color:#FFFFFF;}
30% { background-color:#FFFFFF;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-moz-keyframes el_one
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#FFFFFF;}
20% { background-color:#FFFFFF;}
22% { background-color:#FFFFFF;}
30% { background-color:#FFFFFF;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-webkit-keyframes el_one
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#FFFFFF;}
20% { background-color:#FFFFFF;}
22% { background-color:#FFFFFF;}
30% { background-color:#FFFFFF;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}



@keyframes el_two
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#FFFFFF;}
30% { background-color:#FFFFFF;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#FFFFFF;}
50% { background-color:#FFFFFF;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#FFFFFF;}
90% { background-color:#FFFFFF;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-moz-keyframes el_two
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#FFFFFF;}
30% { background-color:#FFFFFF;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#FFFFFF;}
50% { background-color:#FFFFFF;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#FFFFFF;}
90% { background-color:#FFFFFF;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-webkit-keyframes el_two
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#FFFFFF;}
30% { background-color:#FFFFFF;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#FFFFFF;}
50% { background-color:#FFFFFF;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#FFFFFF;}
90% { background-color:#FFFFFF;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}



@keyframes el_three
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-moz-keyframes el_three
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-webkit-keyframes el_three
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}




@keyframes el_four
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#FFFFFF;}
100% { background-color:#FFFFFF;}
}
@-moz-keyframes el_four
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#FFFFFF;}
100% { background-color:#FFFFFF;}
}
@-webkit-keyframes el_four
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#FFFFFF;}
100% { background-color:#FFFFFF;}
}




@keyframes el_five
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-moz-keyframes el_five
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-webkit-keyframes el_five
{
0% { background-color:#FFFFFF;}
2% { background-color:#FFFFFF;}
10% { background-color:#FFFFFF;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#FFFFFF;}
40% { background-color:#FFFFFF;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#FFFFFF;}
70% { background-color:#FFFFFF;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}





@keyframes el_six
{
0% { background-color:#FFFFFF;}
2% { background-color:#000000;}
10% { background-color:#000000;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#FFFFFF;}
50% { background-color:#FFFFFF;}
52% { background-color:#FFFFFF;}
60% { background-color:#FFFFFF;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-moz-keyframes el_six
{
0% { background-color:#FFFFFF;}
2% { background-color:#000000;}
10% { background-color:#000000;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#FFFFFF;}
50% { background-color:#FFFFFF;}
52% { background-color:#FFFFFF;}
60% { background-color:#FFFFFF;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-webkit-keyframes el_six
{
0% { background-color:#FFFFFF;}
2% { background-color:#000000;}
10% { background-color:#000000;}
12% { background-color:#000000;}
20% { background-color:#000000;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#FFFFFF;}
50% { background-color:#FFFFFF;}
52% { background-color:#FFFFFF;}
60% { background-color:#FFFFFF;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}




@keyframes el_seven
{
0% { background-color:#FFFFFF;}
2% { background-color:#000000;}
10% { background-color:#000000;}
12% { background-color:#FFFFFF;}
20% { background-color:#FFFFFF;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-moz-keyframes el_seven
{
0% { background-color:#FFFFFF;}
2% { background-color:#000000;}
10% { background-color:#000000;}
12% { background-color:#FFFFFF;}
20% { background-color:#FFFFFF;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}
@-webkit-keyframes el_seven
{
0% { background-color:#FFFFFF;}
2% { background-color:#000000;}
10% { background-color:#000000;}
12% { background-color:#FFFFFF;}
20% { background-color:#FFFFFF;}
22% { background-color:#000000;}
30% { background-color:#000000;}
32% { background-color:#000000;}
40% { background-color:#000000;}
42% { background-color:#000000;}
50% { background-color:#000000;}
52% { background-color:#000000;}
60% { background-color:#000000;}
62% { background-color:#000000;}
70% { background-color:#000000;}
72% { background-color:#000000;}
80% { background-color:#000000;}
82% { background-color:#000000;}
90% { background-color:#000000;}
92% { background-color:#000000;}
100% { background-color:#000000;}
}

div#margin{

margin-bottom:200px;

}

Paste the below code in the page where you want to create item

<div class="margin">
	<div class="element_1"></div>
	<div class="element_2"></div>
	<div class="element_3"></div>
	<div class="element_4"></div>
	<div class="element_5"></div>
	<div class="element_6"></div>
	<div class="element_7"></div>
	</div>