Revision control
Copy as Markdown
<style>
@keyframes transformCircle {
0% {transform: translate(0px, 0px)}
100% {transform: translate(70px, 0px)}
}
@keyframes transformRect {
0% {transform: matrix(1, 0, 0, 1, 0, 0);}
100% {transform: matrix(1, 0, 0, 1, 0, 100);}
}
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="100" y="150" width="100" height="100" fill="blue" stroke-width="6"/>
</svg>