Revision control
Copy as Markdown
<style>
@keyframes color {
0% {fill: red;}
100% {fill: blue;}
}
@keyframes transform {
0% {transform: translate(0, 0);}
100% {transform: translate(50px, 0);}
}
@keyframes stroke {
0% {stroke: green;}
100% {stroke: violet;}
}
#circle1 {
animation-duration: 150ms, 1000ms;
animation-name: color, transform, stroke;
animation-iteration-count: infinite, 1;
}
#circle2 {
animation-duration: 300ms;
animation-name: color, transform, stroke;
animation-iteration-count: infinite;
}
#circle3 {
animation-duration: 150ms, 200ms, 900ms;
animation-name: color, transform, stroke;
animation-iteration-count: 3, 2, infinite;
}
</style>
<circle id="circle1" cx="100" cy="100" r="60" fill="red" stroke="green" stroke-width="12"/>
<circle id="circle2" cx="100" cy="250" r="60" fill="red" stroke="green" stroke-width="12"/>
<circle id="circle3" cx="100" cy="400" r="60" fill="red" stroke="green" stroke-width="12"/>
</svg>