CSS3 Keyframe Animation

by netsi1964

HTML

<div class="circle"></div><div class="circle" style="margin-top: -50px; z-index: 10; background: #0000ff;"></div>

CSS

.circle {
    width: 200px;
    height: 200px;
    background: #FF0000;
    position: relative;
    top: 100px;
    left: 100px;

    -webkit-animation: animateTab 10s ease-out;
    -moz-animation: animateTab 10s ease-out;
    -ms-animation: animateTab 10s ease-out;
    -o-animation: animateTab 10s ease-out;
    animation: animateTab 10s ease-out;
    border-radius: 200px;
}

@keyframes "animateTab" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity: 0;
       display: none;
 }
 98% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
       filter: alpha(opacity=90);
       opacity: 0.9;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
       display: block;
 }

}

@-moz-keyframes animateTab {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   display: none;
 }
 98% {
   filter: alpha(opacity=90);
   opacity: 0.9;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   display: block;
 }

}

@-webkit-keyframes "animateTab" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   display: none;
 }
 98% {
   filter: alpha(opacity=90);
   opacity: 0.9;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   display: block;
 }

}

@-ms-keyframes "animateTab" {
    0%  {
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    display: none;
}
 98% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
   filter: alpha(opacity=90);
   opacity: 0.9;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   display: block;
 }

}

 @-o-keyframes "animateTab" {
    0%  {
     filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    display:...