Revision control
Copy as Markdown
<style>
@keyframes transformCircle {
0% {transform: scale(1, 1)}
100% {transform: scale(1.5, 1.5)}
}
@keyframes transformRect {
0% {transform: matrix(1, 0, 0, 1, 0, 0);}
100% {transform: matrix(1.5, 0, 0, 1.5, 0, 0);}
}
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>