Last Updated: February 25, 2016
·
880
· ollierussell8

CSS Keyframe Animations

yellowone.animate {

-webkit-animation-name: yellow_one;
-webkit-animation-duration: 13s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;    
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

animation-name: yellow_one;
animation-duration: 13s;
animation-timing-function: ease;
animation-iteration-count: infinite;    
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;

}

@-webkit-keyframes yellow_one {

0% {
    left:185px;
    top:-15px;
}
6.6% {
    left:260px;
    top:20px;
}
13.2% {
    left:285px;
    top:85px;
}
19.8% {
    left:260px;
    top:150px;
}
26.4% {
    left:185px;
    top:185px;
}
33% {
    left:115px;
    top:220px;
}
39.6% {
    left:85px;
    top:285px;
}
46.2% {
    left:115px;
    top:350px;
}
52.8% {
    left:185px;
    top:385px;
}
59.4% {
    left:260px;
    top:350px;
}
66% {
    left:285px;
    top:285px;
}
72.6% {
    left:260px;
    top:220px;
}
79.2% {
    left:115px;
    top:150px;
}
85.8% {
    left:85px;
    top:85px;
}
92.4% {
    left:115px;
    top:20px;
}
100% {
    left:185px;
    top:-15px;
}

}