Revision control
++ <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
++ <style>
++ @keyframes transformCircle {
++ 0% {transform: skew(0deg, 0deg)}
++ 100% {transform: skew(15deg, 20deg)}
++ }
++
++ @keyframes transformRect {
++ 0% {transform: skew(0deg, 0deg)}
++ 100% {transform: skew(-15deg, -20deg)}
++ }
++
++ 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>