SVG组件在动画前会稍微平移

Question

我有这个SVG Vue组件，该组件动画化后可以来回旋转一次：

<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>

但是，在加载时，图像的动画部分会稍微出现在需要的位置的右​​侧，然后立即移动到适当的位置并进行动画处理。有SVG知识的人都知道为什么会这样吗？我之前已经对两张图像进行了动画处理，但这通常是由几个部分组成的组，而不是几乎整个SVG对象。

我拥有这个SVG Vue组件，该组件已设置动画来回旋转一次：

Answer 1

弄清楚了-尽管处于条件类中，关键帧仍保持活动状态：引用关键帧的类需要进入条件类！