我做了我的第一个动画徽标，蓝色和红色的山脉在阳光下在画布前“嬉戏”。
创造性地，我对结果感到满意，但我想确保动画定时功能使太阳像山一样“反弹”。
左边的那个现在可以完美地完成，但是后来我不知道如何确保右边的那个也能做到同样的事情。
我想我应该“分割”我的动画并避免“替换”？
如何在不重写大量代码的情况下实现这一目标？
<div style="width: 100%; height: 100%;"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="70 100 320 260"> <style> /* <![CDATA[ */ #canvas { fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 10; animation: canvas 1s infinite alternate; -webkit-animation: canvas 1s infinite alternate; } @keyframes canvas { 0% { transform: scale(1.0); -webkit-transform: scale(1.0); } 100% { transform: scale(0.95); -webkit-transform: scale(0.95); } } #sun { fill: rgb(248, 254, 141); stroke: rgb(0, 0, 0); stroke-width: 10; animation: sun 1s ease-in infinite alternate; -webkit-animation: sun 1s ease-in infinite alternate; } @keyframes sun { 0% { transform: translate(30px, 25px); -webkit-transform: translate(30px, 25px); } 50% { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); } 100% { transform: translate(-30px, 25px); -webkit-transform: translate(-30px, 25px); } } #redmountain { fill: rgb(246, 198, 161); stroke: black; stroke-width: 10; animation: redmountain 1s ease-in-out infinite alternate; -webkit-animation: redmountain 1s ease-in-out infinite alternate; } @keyframes redmountain { 0% { transform: translate(10px, -5px); -webkit-transform: translate(10px, -5px); } 50% { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); } 100% { transform: translate(10px, 5px); -webkit-transform: translate(10px, 5px); } } #bluemountain { fill: rgb(170, 226, 237); stroke: black; stroke-width: 10; animation: bluemountain 1s ease-in-out infinite alternate; -webkit-animation: bluemountain 1s ease-in-out infinite alternate; } @keyframes bluemountain { 0% { transform: translate(-10px, 5px); -webkit-transform: translate(-10px, 5px); } 50% { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); } 100% { transform: translate(-10px, -5px); -webkit-transform: translate(-10px, -5px); } } /* ]]> */ </style> <path id="canvas" d="M113.72,157.88 Q245.96,160.52 335.00,155.00 Q344.84,243.08 379.16,330.20 Q249.80,286.28 86.84,332.12 Q104.84,253.64 113.72,157.88Z" /> <path id="sun" d="M169.25,171.82 C153.48,100.60 264.27,76.08 280.03,147.30 C295.80,218.52 185.01,243.04 169.25,171.82Z" /> <path id="redmountain" d="M282.86,245.68 Q305.23,282.77 335.36,341.75 Q272.53,336.63 201.75,337.86 Q231.77,304.97 282.86,245.68Z" /> <path id="bluemountain" d="M172.59,252.90 Q151.69,287.11 123.51,341.52 Q181.67,337.10 247.16,338.61 Q219.55,308.03 172.59,252.90Z" /></svg></div>