Revision control
Copy as Markdown
<style>
@keyframes transformCircle {
0% {transform: rotate(0deg)}
100% {transform: rotate(45deg)}
}
@keyframes transformRect {
0% {transform: rotate(0deg);}
100% {transform: rotate(-45deg);}
}
circle {
animation-duration: 1s;
animation-name: transformCircle;
animation-iteration-count: 1;
}
rect {
animation-duration: 1s;
animation-name: transformRect;
animation-iteration-count: 1;
}
</style>
<circle cx="250" cy="200" r="50" fill="blue" stroke-width="6"/>
<rect x="150" y="150" width="100" height="100" fill="blue" stroke-width="6"/>
</svg>