I have this SVG Vue component which I've animated to rotate back and forth once:
<template>
<div class="handshake_image">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<circle class="cls-1" cx="203.53" cy="200" r="144"/>
<g class="handshake">
<path class="cls-2"
d="M189,288.44h32.28a9.39,9.39,0,0,1,9.39,9.39v9a9.39,9.39,0,0,1-9.39,9.39H189a13.89,13.89,0,0,1-13.89-13.89v0A13.89,13.89,0,0,1,189,288.44Z"
transform="translate(-154.35 232.02) rotate(-45)"/>
<path class="cls-2"
d="M183.53,270.86h78.84a0,0,0,0,1,0,0v27.78a0,0,0,0,1,0,0H183.53a4.5,4.5,0,0,1-4.5-4.5V275.36A4.5,4.5,0,0,1,183.53,270.86Z"
transform="translate(-136.71 239.46) rotate(-45)"/>
<path class="cls-3"
d="M220.7,147.25,260,108l58.93,58.93-39.29,39.28,0,0a27.71,27.71,0,0,1,0,39.2L260,265.11l-78.57-78.57,19.64-19.64"/>
<path class="cls-4" d="M181.42,186.54a55.55,55.55,0,0,0,78.57,0"/>
<path class="cls-2" d="M220.7,186.54a55.55,55.55,0,0,1-78.57,0"/>
<rect class="cls-3" x="271.49" y="91.7" width="55.56" height="111.12"
transform="translate(-16.47 254.75) rotate(-45)"/>
<rect class="cls-5" x="296.92" y="69.31" width="55.56" height="125.72"
transform="translate(1.65 268.31) rotate(-45)"/>
<path class="cls-6"
d="M139.67,104.67,285,250a13.89,13.89,0,0,1-19.64,19.64,13.89,13.89,0,1,1-19.64,19.65,13.89,13.89,0,0,1-19.64,19.64,13.89,13.89,0,0,1-19.65,19.64L118,240.11A27.65,27.65,0,0,1,118,201l.06-.07L80.74,163.6Z"/>
<line class="cls-7" x1="226.08" y1="308.93" x2="196.97" y2="279.82"/>
<line class="cls-7" x1="245.72" y1="289.29" x2="216.61" y2="260.18"/>
<line class="cls-7" x1="265.36" y1="269.64" x2="236.25" y2="240.54"/>
<rect class="cls-3" x="48" y="119.6" width="111.12" height="55.56"
transform="translate(-73.88 116.39) rotate(-45)"/>
<rect class="cls-5" x="11.95" y="105.25" width="129.12" height="55.56"
transform="translate(-71.66 93.06) rotate(-45)"/>
<rect class="cls-2" x="131.76" y="239.33" width="83.34" height="27.78" rx="13.89"
transform="translate(-128.26 196.8) rotate(-45)"/>
<rect class="cls-2" x="116.19" y="229.51" width="55.56" height="27.78" rx="13.89"
transform="translate(-129.94 173.09) rotate(-45)"/>
<rect class="cls-2" x="155.47" y="268.8" width="55.56" height="27.78" rx="13.89"
transform="translate(-146.22 212.38) rotate(-45)"/>
<rect class="cls-2" x="179.18" y="298.26" width="27.78" height="27.78" rx="13.89"
transform="translate(-164.17 227.95) rotate(-45)"/>
<path class="cls-3"
d="M201.49,166.46,152,216a13.88,13.88,0,0,1-19.64,0h0a13.89,13.89,0,0,1,0-19.64l49.11-49.11a27.77,27.77,0,0,1,39.28,0h0"/>
<circle class="cls-8" cx="318.68" cy="186.54" r="8"/>
<path class="cls-9" d="M318.68,179.54a7,7,0,1,1-7,7,7,7,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
<circle class="cls-8" cx="82.85" cy="186.54" r="8"/>
<path class="cls-9" d="M82.85,179.54a7,7,0,1,1-7,7,7,7,0,0,1,7-7m0-2a9,9,0,1,0,9,9,9,9,0,0,0-9-9Z"/>
<circle class="cls-2" cx="193" cy="233.3" r="9"/>
<circle class="cls-2" cx="152.97" cy="234.88" r="9"/>
<path class="cls-2" d="M131,261.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-2" d="M151,281.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-2" d="M171,301.78a9,9,0,0,1-4.89-4.89"/>
<path class="cls-6" d="M223.41,321.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M243.41,301.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M262.41,282.89a9,9,0,0,1-4.89,4.89"/>
<path class="cls-6" d="M282.41,262.89a9,9,0,0,1-4.89,4.89"/>
<circle class="cls-2" cx="193.39" cy="273.18" r="9"/>
<path class="cls-2" d="M186.64,306.09a9,9,0,0,0,12.72,12.73Z"/>
<path class="cls-2" d="M125.42,203.36l3.44,3.43,5.14-5.14a5,5,0,0,0,0-7h0Z"/>
<line class="cls-2" x1="168.43" y1="248.22" x2="177.84" y2="257.63"/>
<line class="cls-2" x1="173.13" y1="258.92" x2="167.13" y2="252.92"/>
<line class="cls-2" x1="178.17" y1="251.96" x2="174.1" y2="247.89"/>
<line class="cls-2" x1="158.17" y1="178.96" x2="154.1" y2="174.89"/>
<line class="cls-2" x1="159.13" y1="173.92" x2="157.1" y2="171.89"/>
<line class="cls-2" x1="153.13" y1="179.92" x2="151.1" y2="177.89"/>
<line class="cls-10" x1="233.25" y1="242.54" x2="238.08" y2="237.72"/>
<line class="cls-10" x1="214.25" y1="262.54" x2="219.08" y2="257.72"/>
</g>
</svg>
</div>
</template>
<style scoped lang="scss">
.handshake_image {
width: 450px;
height: 420px;
}
.handshake {
animation: handshake_rotate 1.58s forwards;
transform-box: fill-box;
transform-origin: left center;
}
.handshake * {
transform-origin: top left;
}
.handshake_animations {
@keyframes handshake_rotate {
0% {
transform: rotate(-10deg);
}
47% {
transform: rotate(10deg);
}
48% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
}
</style>
But, upon loading, the animated part of the image is appearing slightly to the right of where it needs to be, then instantly moving to its proper place and animating. Anyone with SVG knowledge know why that might be? I've animated a couple of images like this before, but that was usually groups of a few parts instead of nearly the entire SVG object
figured it out - the keyframes are remaining active despite being in a conditional class: the class which references the keyframes needs to go in the conditional class instead!
<style scoped lang="scss">
.handshake_image {
width: 450px;
height: 420px;
}
.handshake {
transform-origin: top left;
}
@keyframes handshake_rotate {
0% {
transform: rotate(-10deg);
}
47% {
transform: rotate(10deg);
}
48% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.handshake_animations {
.handshake {
animation: handshake_rotate 1.58s forwards;
transform-box: fill-box;
transform-origin: left center;
}
}
</style>
hope someone gets some use out of this!