CSS Animation Test

by s_light

HTML

<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
<div class="x5"></div>

CSS

div
{
width:100px;
height:100px;
background:blue;
    float:left;
    margin: 1em;
/* Standard syntax */
animation-name:x1;
animation-duration:10s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;
}

div.x1 {
    animation-name: x1;
}

div.x2 {
    animation-name: x2;
}

div.x3 {
    animation-name: x3;
}

div.x4 {
    animation-name: x4;
}

div.x5 {
    animation-name: x5;
}

/* Standard syntax */

@keyframes x1 {
    0%   {background:yellow;}
    10%  {background:red;}
    20%  {background:red;}
    30%  {background:yellow;}
    40%  {background:yellow;}
    50%  {background:yellow;}
    60%  {background:yellow;}
    70%  {background:yellow;}
    80%  {background:yellow;}
    90%  {background:yellow;}
    100% {background:yellow;}
}

@keyframes x2 {
    0%   {background:yellow;}
    10%  {background:yellow;}
    20%  {background:yellow;}
    30%  {background:red;}
    40%  {background:red;}
    50%  {background:yellow;}
    60%  {background:yellow;}
    70%  {background:yellow;}
    80%  {background:yellow;}
    90%  {background:yellow;}
    100% {background:yellow;}
}

@keyframes x3 {
    0%   {background:yellow;}
    10%  {background:yellow;}
    20%  {background:yellow;}
    30%  {background:yellow;}
    40%  {background:yellow;}
    50%  {background:red;}
    60%  {background:red;}
    70%  {background:yellow;}
    80%  {background:yellow;}
    90%  {background:yellow;}
    100% {background:yellow;}
}

@keyframes x4 {
    0%   {background:yellow;}
    10%  {background:yellow;}
    20%  {background:yellow;}
    30%  {background:yellow;}
    40%  {background:yellow;}
    50%  {background:yellow;}
    60%  {background:yellow;}
    70%  {background:red;}
    80%  {background:red;}
    90%  {background:yellow;}
    100% {background:yellow;}
}

@keyframes x5 {
    0%   {background:yellow;}
    10%  {background:yellow;}
    20%  {background:yellow;}
    30% ...