Animierter Firlefanz

Das Ergebnis einer Schulung :-)

HTML

<div id="kreis1"></div>

CSS

#kreis1 {
    width:0;
    height:0;
    margin: 0 auto;
    top: 100px;
    position:relative;
    background: transparent;
    border-color: red green blue orange;
    border-style:solid;
    border-width:200px;
    border-radius: 200px;
    -webkit-animation: drehen 8s infinite linear, party 2s infinite linear, wobble 1s infinite linear, shrink 4s infinite linear;
}
.teasercontent {
    -webkit-animation: drehen 8s infinite linear, party 2s infinite linear, wobble 1s infinite linear, shrink 4s infinite linear;
}

@-webkit-keyframes drehen /* Safari and Chrome */
{
0%{  -webkit-transform:rotate(0deg);  }
50% {  -webkit-transform:rotate(359deg);  }
100% {  -webkit-transform:rotate(0deg);  }
}
@-webkit-keyframes party /* Safari and Chrome */
{
0%{border-color: red green blue orange;}
25% {border-color: orange red green blue;}
50% {border-color: blue  orange red green;}
75% {border-color: green blue orange red;}
}
@-webkit-keyframes wobble/* Safari and Chrome */
{
0%{border-radius: 200px;}
50% {border-radius: 0px;}
100% {border-radius: 200px;}
}
@-webkit-keyframes shrink/* Safari and Chrome */
{
0%{border-width:200px;}
50% {border-width:50px;}
100% {border-width: 200px;}
}