如何解决带有 Transform Translate 的 CSS 动画
我希望右下角的动画像translationX 0 到translatedX 20px 那样进行动画处理，然后回到-20px，然后再到translateY -10px 直线然后下降到translateY 0px 直线，然后回到translateX 0px。但它并不是在对角线上下移动。
代码发送框：https://codesandbox.io/s/svg-animation-ch1vz?file=/index.html:602-930
解决方法
试试这个：
@keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px,0px);
}
100% {
transform: translateX(0px);
}
}
工作示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<style>
#stob1 {
animation: leftStob 6s linear infinite;
transform-origin: 10% 70%;
transform-box: fill-box;
}
#stob2 {
}
#like1 {
}
#like2 {
}
#love1 {
}
#love2 {
}
#love3 {
}
/* #pata1 {
animation: pata 6s linear infinite;
transform-origin: bottom;
transform-box: fill-box;
i want the bottom right animated thing to be animated like translatedX
0 to translatedX 20px then come back to -20px then to up with translateY
-10px straight then come down to translateY 0px straight and then get back to translateX 0px.
but it is not heppening whtn it is going up and down diagonaly.
} */
@keyframes leftStob {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(20px);
}
40% {
transform: translateX(-20px);
}
60% {
transform: translate(-20px,-10px);
}
80% {
transform: translate(-20px,0px);
}
100% {
transform: translateX(0px);
}
}
@keyframes pata {
0% {
transform: rotateZ(0deg);
}
25% {
transform: rotateZ(5deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(-5deg);
}
100% {
transform: rotateZ(0deg);
}
}
</style>
</head>
<body>
<div id="wrapper">
<svg
width="646"
height="479"
viewBox="0 0 646 479"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="undraw_Social_life_re_x7t5 1" clip-path="url(#clip0)">
<g id="stob2">
<path
id="Vector"
d="M39.8701 476.965C39.8701 467.152 43.7683 457.741 50.7071 450.802C57.646 443.863 67.0571 439.965 76.8701 439.965C86.6831 439.965 96.0942 443.863 103.033 450.802C109.972 457.741 113.87 467.152 113.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="stob1">
<path
id="Vector_2"
d="M153.87 476.965C153.87 467.152 157.768 457.741 164.707 450.802C171.646 443.863 181.057 439.965 190.87 439.965C200.683 439.965 210.094 443.863 217.033 450.802C223.972 457.741 227.87 467.152 227.87 476.965"
fill="#46BB0F"
/>
</g>
<g id="like2">
<path
id="Vector_3"
d="M230.87 144.402C227.903 144.402 225.003 145.282 222.537 146.93C220.07 148.578 218.147 150.921 217.012 153.662C215.877 156.402 215.58 159.418 216.158 162.328C216.737 165.238 218.166 167.911 220.264 170.008C222.361 172.106 225.034 173.535 227.944 174.114C230.853 174.692 233.869 174.395 236.61 173.26C239.351 172.125 241.694 170.202 243.342 167.735C244.99 165.269 245.87 162.369 245.87 159.402C245.87 155.424 244.29 151.608 241.477 148.795C238.664 145.982 234.848 144.402 230.87 144.402V144.402ZM227.279 165.951C227.279 166.063 227.234 166.171 227.155 166.25C227.076 166.329 226.968 166.374 226.856 166.374H223.476C223.364 166.374 223.256 166.329 223.177 166.25C223.098 166.171 223.053 166.063 223.053 165.951V157.923C223.053 157.811 223.098 157.703 223.177 157.624C223.256 157.545 223.364 157.5 223.476 157.5H226.856C226.968 157.5 227.076 157.545 227.155 157.624C227.234 157.703 227.279 157.811 227.279 157.923V165.951ZM238.687 159.613C238.687 159.949 238.553 160.272 238.316 160.509C238.078 160.747 237.756 160.881 237.419 160.881V160.902C237.658 160.951 237.872 161.08 238.026 161.269C238.18 161.458 238.264 161.694 238.264 161.937C238.264 162.181 238.18 162.417 238.026 162.605C237.872 162.794 237.658 162.923 237.419 162.972V163.416C237.644 163.416 237.858 163.505 238.017 163.663C238.175 163.822 238.264 164.037 238.264 164.261C238.264 164.485 238.175 164.7 238.017 164.859C237.858 165.017 237.644 165.106 237.419 165.106H228.969C228.857 165.106 228.749 165.062 228.67 164.982C228.591 164.903 228.546 164.796 228.546 164.684V157.923C228.546 155.81 231.926 152.852 231.926 152.852V151.822C231.926 151.509 232.041 151.207 232.249 150.972C232.456 150.738 232.743 150.588 233.054 150.551C233.365 150.514 233.679 150.593 233.936 150.772C234.193 150.951 234.375 151.218 234.448 151.522L234.462 151.585C234.626 153.074 234.263 154.573 233.435 155.822H236.036C236.075 155.818 236.112 155.81 236.152 155.81H237.419C237.083 156.483 237.028 157.261 237.266 157.974C237.503 158.687 238.015 159.277 238.687 159.613V159.613Z"
fill="#5E90FF"
/>
</g>
<g id="like1">
<path
id="Vector_4"
d="M252.87 51.4018C248.717 51.4018 244.657 52.6334 241.203 54.9409C237.75 57.2484 235.058 60.5282 233.469 64.3654C231.879 68.2027 231.463 72.4251 232.274 76.4987C233.084 80.5723 235.084 84.3141 238.021 87.251C240.958 90.1879 244.7 92.188 248.773 92.9983C252.847 93.8086 257.069 93.3927 260.906 91.8033C264.744 90.2138 268.023 87.5222 270.331 84.0688C272.638 80.6153 273.87 76.5552 273.87 72.4018C273.87 66.8322 271.658 61.4908 267.719 57.5526C263.781 53.6143 258.44 51.4018 252.87 51.4018ZM247.842 81.5708C247.842 81.7277 247.78 81.8781 247.669 81.9891C247.558 82.1 247.407 82.1623 247.25 82.1623H242.518C242.361 82.1623 242.211 82.1 242.1 81.9891C241.989 81.8781 241.926 81.7277 241.926 81.5708V70.3314C241.926 70.1745 241.989 70.024 242.1 69.9131C242.211 69.8021 242.361 69.7398 242.518 69.7398H247.25C247.407 69.7398 247.558 69.8021 247.669 69.9131C247.78 70.024 247.842 70.1745 247.842 70.3314V81.5708ZM263.814 72.6975C263.814 73.1682 263.627 73.6196 263.294 73.9524C262.961 74.2852 262.51 74.4722 262.039 74.4722V74.502C262.373 74.5702 262.673 74.7517 262.889 75.0157C263.104 75.2798 263.222 75.6102 263.222 75.9511C263.222 76.292 263.104 76.6224 262.889 76.8864C262.673 77.1505 262.373 77.3319 262.039 77.4001V78.0215C262.353 78.0215 262.654 78.1461 262.876 78.368C263.098 78.5899 263.222 78.8908 263.222 79.2046C263.222 79.5184 263.098 79.8193 262.876 80.0412C262.654 80.263 262.353 80.3877 262.039 80.3877H250.208C250.051 80.3877 249.901 80.3254 249.79 80.2144C249.679 80.1035 249.617 79.953 249.617 79.7961V70.3314C249.617 67.3736 254.349 63.2328 254.349 63.2328V61.7906C254.348 61.3521 254.509 60.9287 254.8 60.6006C255.091 60.2726 255.492 60.0627 255.928 60.0109C256.363 59.9591 256.802 60.069 257.162 60.3196C257.522 60.5702 257.777 60.9442 257.88 61.3706C257.886 61.3994 257.892 61.4286 257.898 61.4581C258.49 64.4159 256.461 67.3899 256.461 67.3899H260.103C260.157 67.385 260.209 67.3736 260.264 67.3736H262.039C262.51 67.3736 262.961 67.5606 263.294 67.8934C263.627 68.2262 263.814 68.6776 263.814 69.1483C263.814 69.6189 263.627 70.0703 263.294 70.4031C262.961 70.7359 262.51 70.9229 262.039 70.9229C262.51 70.9229 262.961 71.1099 263.294 71.4427C263.627 71.7755 263.814 72.2269 263.814 72.6975Z"
fill="#5E90FF"
/>
</g>
<g id="mobile">
<path
id="Vector_5"
d="M258.702 209.928L282.994 227.126C283.305 227.352 283.68 227.474 284.064 227.474C284.449 227.474 284.824 227.352 285.135 227.126L291.699 222.198C291.917 222.038 292.097 221.831 292.224 221.593C292.351 221.354 292.423 221.09 292.435 220.82C292.446 220.55 292.396 220.281 292.289 220.033C292.182 219.784 292.021 219.563 291.817 219.386L273.124 202.717C272.879 202.503 272.581 202.357 272.26 202.295C271.94 202.233 271.609 202.257 271.301 202.364L259.138 206.717C258.825 206.832 258.55 207.03 258.342 207.29C258.133 207.55 258 207.862 257.955 208.192C257.91 208.522 257.956 208.858 258.088 209.164C258.219 209.469 258.432 209.734 258.702 209.928H258.702Z"
fill="#3F3D56"
/>
<path
id="Vector_6"
d="M260.91 208.601L282.802 224.1C282.911 224.183 283.045 224.229 283.183 224.23C283.32 224.231 283.455 224.188 283.566 224.107L289.47 219.675C289.537 219.627 289.594 219.566 289.638 219.496C289.682 219.426 289.711 219.347 289.725 219.266C289.738 219.184 289.735 219.101 289.716 219.02C289.697 218.94 289.663 218.864 289.614 218.797C289.587 218.76 289.556 218.727 289.522 218.697L272.662 203.662C272.574 203.587 272.468 203.536 272.354 203.515C272.24 203.494 272.123 203.503 272.014 203.542L261.058 207.462C260.948 207.504 260.852 207.576 260.779 207.668C260.707 207.761 260.66 207.871 260.645 207.988C260.63 208.104 260.647 208.223 260.693 208.331C260.74 208.439 260.815 208.533 260.91 208.602V208.601Z"
fill="white"
/>
</g>
<g id="body">
<path
id="Vector_7"
d="M299.623 297.6C301.153 297.244 302.586 296.558 303.822 295.589C305.057 294.62 306.066 293.391 306.776 291.991C307.485 290.59 307.879 289.05 307.93 287.48C307.98 285.911 307.686 284.349 307.067 282.905L346.67 193.433L324.015 187.727L292.211 277.47C289.855 278.669 288.02 280.692 287.055 283.153C286.09 285.615 286.062 288.345 286.976 290.827C287.889 293.308 289.681 295.368 292.012 296.616C294.343 297.865 297.051 298.215 299.623 297.6V297.6Z"
fill="#A0616A"
/>
<path
id="Vector_8"
d="M335.309 221.435L313.275 211.121C312.648 210.828 312.092 210.403 311.644 209.875C311.196 209.347 310.868 208.729 310.68 208.062C310.493 207.396 310.451 206.697 310.558 206.013C310.666 205.329 310.919 204.677 311.301 204.1L324.691 183.877C326.212 180.68 328.938 178.216 332.272 177.026C335.606 175.835 339.276 176.014 342.478 177.525C345.68 179.035 348.153 181.753 349.354 185.083C350.556 188.413 350.389 192.083 348.889 195.29L341.965 218.453C341.767 219.116 341.428 219.729 340.971 220.249C340.515 220.769 339.951 221.185 339.32 221.468C338.688 221.751 338.003 221.895 337.31 221.889C336.618 221.883 335.935 221.728 335.309 221.435H335.309Z"
fill="#FF63E5"
/>
<path
id="Vector_9"
d="M347.236 466.333L334.976 466.332L329.144 419.044L347.238 419.045L347.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_10"
d="M350.363 478.217L310.832 478.216V477.716C310.832 475.695 311.23 473.694 312.003 471.828C312.776 469.961 313.91 468.265 315.339 466.836C316.767 465.407 318.464 464.274 320.33 463.501C322.197 462.727 324.198 462.329 326.219 462.329H326.22L350.363 462.33L350.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_11"
d="M388.236 466.333L375.976 466.332L370.144 419.044L388.238 419.045L388.236 466.333Z"
fill="#A0616A"
/>
<path
id="Vector_12"
d="M391.363 478.217L351.832 478.216V477.716C351.832 475.695 352.23 473.694 353.003 471.828C353.776 469.961 354.91 468.265 356.339 466.836C357.767 465.407 359.464 464.274 361.33 463.501C363.197 462.727 365.198 462.329 367.219 462.329H367.22L391.363 462.33L391.363 478.217Z"
fill="#2F2E41"
/>
<path
id="Vector_13"
d="M387.675 453.178C387.564 453.178 387.453 453.174 387.342 453.166L373.243 452.122C372.277 452.046 371.361 451.662 370.629 451.027C369.897 450.391 369.389 449.538 369.178 448.592L344.698 314.22C344.617 313.848 344.398 313.521 344.086 313.305C343.773 313.089 343.39 313 343.014 313.055C342.637 313.111 342.296 313.307 342.06 313.604C341.823 313.902 341.708 314.278 341.737 314.657L350.43 447.05C350.478 447.668 350.398 448.291 350.195 448.877C349.992 449.463 349.669 450.001 349.248 450.457C348.827 450.913 348.315 451.277 347.747 451.525C347.178 451.774 346.564 451.902 345.944 451.902H335.208C334.302 451.903 333.418 451.63 332.67 451.119C331.922 450.609 331.345 449.885 331.015 449.042C304.015 378.336 313.792 239.795 313.87 238.402L314.87 237.402L368.648 246.687L368.762 246.798C387.136 260.294 395.088 418.348 392.167 448.414C392.148 449.691 391.677 450.92 390.837 451.882C389.994 452.712 388.858 453.178 387.675 453.178V453.178Z"
fill="#2F2E41"
/>
<path
id="Vector_14"
d="M376.404 269.505C376.154 269.505 375.904 269.48 375.659 269.43L312.581 261.336C310.323 260.88 308.711 258.47 308.833 255.728L314.87 222.402C306.87 212.402 314.429 186.576 319.318 180.046L317.427 174.93C316.94 173.602 316.91 172.149 317.343 170.801C317.715 169.533 318.567 168.46 319.719 167.812L345.318 154.21C347.588 153.004 350.25 154.239 351.256 156.959L356.276 170.545L356.199 170.585C368.219 177.028 378.87 183.402 370.87 217.402L380.9 264.358C380.866 265.839 380.27 267.251 379.231 268.307C378.481 269.06 377.467 269.49 376.404 269.505Z"
fill="#FF63E5"
/>
<path
id="Vector_15"
d="M287.403 214.455C287.806 214.834 288.179 215.244 288.517 215.682L337.993 212.263L343.3 201.448L360.67 207.324L353.135 227.385C352.526 229.005 351.408 230.385 349.949 231.316C348.489 232.247 346.767 232.68 345.041 232.549L288.781 228.282C287.535 230.012 285.793 231.322 283.785 232.037C281.777 232.752 279.598 232.84 277.54 232.287C275.481 231.734 273.639 230.567 272.26 228.942C270.88 227.317 270.028 225.311 269.817 223.189C269.605 221.068 270.045 218.933 271.077 217.068C272.108 215.202 273.684 213.696 275.593 212.747C277.502 211.799 279.655 211.455 281.764 211.76C283.874 212.065 285.841 213.005 287.403 214.455V214.455Z"
fill="#A0616A"
/>
<path
id="Vector_16"
d="M337.099 209.879C336.853 209.281 336.739 208.637 336.764 207.991C336.789 207.344 336.953 206.711 337.245 206.134L347.448 185.985C348.493 182.846 350.739 180.249 353.696 178.764C356.652 177.279 360.077 177.027 363.219 178.062C366.36 179.098 368.964 181.338 370.457 184.29C371.951 187.242 372.213 190.665 371.186 193.81L367.256 216.126C367.144 216.763 366.896 217.368 366.529 217.9C366.162 218.432 365.684 218.879 365.129 219.21C364.573 219.542 363.953 219.749 363.31 219.819C362.667 219.889 362.017 219.819 361.403 219.615L339.839 212.436C339.226 212.232 338.663 211.898 338.19 211.456C337.717 211.015 337.345 210.477 337.099 209.879Z"
fill="#FF63E5"
/>
</g>
<g id="love3">
<path
id="Vector_17"
d="M262.48 196.17C262.277 196.36 262.01 196.465 261.732 196.465C261.455 196.465 261.188 196.36 260.985 196.17L260.411 195.651C255.713 191.341 253 188.54 253 185.049C253 182.201 254.802 180 257.628 180C258.412 180.004 259.184 180.179 259.893 180.512C260.602 180.844 261.23 181.327 261.734 181.927C262.237 181.327 262.865 180.845 263.573 180.512C264.281 180.179 265.054 180.005 265.836 180C268.666 180 270.465 182.194 270.465 185.049C270.465 188.533 267.752 191.334 263.054 195.651L262.48 196.17Z"
fill="#FF6584"
/>
</g>
<g id="love2">
<path
id="Vector_18"
d="M225.57 133.698C225.181 134.061 224.669 134.262 224.138 134.262C223.606 134.262 223.094 134.061 222.705 133.698L221.605 132.704C212.603 124.444 207.406 119.078 207.406 112.388C207.406 106.931 210.859 102.714 216.274 102.714C217.775 102.722 219.255 103.057 220.614 103.694C221.972 104.332 223.176 105.257 224.141 106.406C225.105 105.257 226.308 104.332 227.665 103.695C229.022 103.057 230.502 102.722 232.001 102.714C237.423 102.714 240.87 106.917 240.87 112.388C240.87 119.064 235.672 124.43 226.67 132.704L225.57 133.698Z"
fill="#FF6584"
/>
</g>
<g id="love1">
<path
id="Vector_19"
d="M226.999 40.2437C226.493 40.7144 225.828 40.9762 225.138 40.9762C224.447 40.9762 223.782 40.7144 223.277 40.2437L221.849 38.9517C210.157 28.2243 203.406 21.2547 203.406 12.5654C203.406 5.47747 207.891 3.05176e-05 214.924 3.05176e-05C216.873 0.0111436 218.797 0.445725 220.561 1.27367C222.325 2.10161 223.888 3.30314 225.142 4.79504C226.395 3.30336 227.956 2.10188 229.719 1.2739C231.482 0.445914 233.404 0.0112366 235.351 3.05176e-05C242.394 3.05176e-05 246.87 5.45928 246.87 12.5654C246.87 21.2365 240.119 28.2061 228.427 38.9517L226.999 40.2437Z"
fill="#FF6584"
/>
</g>
<g id="floor">
<path
id="Vector_20"
d="M645 478.402H1C0.734784 478.402 0.480444 478.296 0.292908 478.109C0.105371 477.921 0 477.667 0 477.402C0 477.137 0.105371 476.882 0.292908 476.695C0.480444 476.507 0.734784 476.402 1 476.402H645C645.265 476.402 645.52 476.507 645.707 476.695C645.895 476.882 646 477.137 646 477.402C646 477.667 645.895 477.921 645.707 478.109C645.52 478.296 645.265 478.402 645 478.402Z"
fill="#CCCCCC"
/>
</g>
<g id="head">
<path
id="Vector_21"
d="M320.074 156.357C333.639 156.357 344.635 145.361 344.635 131.796C344.635 118.231 333.639 107.235 320.074 107.235C306.509 107.235 295.513 118.231 295.513 131.796C295.513 145.361 306.509 156.357 320.074 156.357Z"
fill="#A0616A"
/>
<path
id="Vector_22"
d="M333.87 112.402C344.916 112.402 353.87 103.447 353.87 92.4018C353.87 81.3561 344.916 72.4018 333.87 72.4018C322.824 72.4018 313.87 81.3561 313.87 92.4018C313.87 103.447 322.824 112.402 333.87 112.402Z"
fill="#352404"
/>
<path
id="Vector_23"
d="M296.823 134.833C294.869 135.039 292.792 135.225 291.034 134.347C290.093 133.814 289.292 133.066 288.695 132.165C288.098 131.264 287.721 130.235 287.596 129.161C283.87 104.402 304.923 106.438 307.414 105.366C309.088 104.645 310.321 103.194 311.817 102.153C315.089 99.8756 319.334 99.7091 323.32 99.6232C328.051 99.5211 332.954 99.4509 337.297 101.332C341.202 103.162 344.447 106.153 346.588 109.896C348.707 113.623 350.259 117.645 351.195 121.829C352.399 126.616 353.218 131.68 351.978 136.457C350.955 140.089 348.823 143.31 345.878 145.669C342.934 148.029 339.326 149.408 335.559 149.616C337.175 143.909 333.648 137.583 328.416 134.79C324.194 132.714 319.39 132.142 314.799 133.169C311.821 133.772 308.802 134.148 305.767 134.294C302.789 134.405 299.214 134.58 296.823 134.833Z"
fill="#352404"
/>
</g>
<g id="pata1">
<path
id="Vector_24"
d="M616.896 203.791C616.896 155.527 577.745 41 529.448 41C481.152 41 442 155.527 442 203.791C442.018 226.972 451.239 249.198 467.636 265.583C484.034 281.969 506.267 291.173 529.448 291.173C552.63 291.173 574.862 281.969 591.26 265.583C607.658 249.198 616.879 226.972 616.896 203.791V203.791Z"
fill="#46BB0F"
/>
</g>
<g id="wood">
<path
id="Vector_25"
d="M530.164 477.402C529.898 477.402 529.644 477.296 529.456 477.109C529.269 476.921 529.164 476.667 529.164 476.402V200.261C529.164 199.996 529.269 199.742 529.456 199.554C529.644 199.367 529.898 199.261 530.164 199.261C530.429 199.261 530.683 199.367 530.871 199.554C531.058 199.742 531.164 199.996 531.164 200.261V476.402C531.163 476.667 531.058 476.921 530.871 477.109C530.683 477.296 530.429 477.402 530.164 477.402V477.402Z"
fill="#CAC0C0"
/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="646" height="478.402" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。