从左上到右下的 SVG 动画

Posted 2023-03-28

【中文标题】从左上到右下的 SVG 动画

【英文标题】：SVG Animation from Top left to bottom right

【发布时间】：2021-12-12 11:15:57

【问题描述】：

我需要从左上角到右下角为这个 svg 设置动画，就像我粘贴下面链接的 gif 一样。 https://cdn.dribbble.com/users/2077073/screenshots/14916463/media/c43c68af81ae5544bd6065027644edce.gif

body 
  background: black


path 
  fill: white;



/* Set animation here */

@keyframes fadein 
  0% 
    fill: black;
  
  50% 
    fill: gray;
  
  100% 
    fill: white;
  


@keyframes fadein2 
  0% 
    fill: black;
  
  50% 
    fill: black;
  
  100% 
    fill: white;
  


.svg-wrapper:hover .S 
  animation: 1s fadein;


.svg-wrapper:hover .L 
  animation: 1s fadein2;

<a href="" class="svg-wrapper" style="margin: 100px auto; display: block; width: 200px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1239.6 785.2">
    
    <path class="S" d="M0,784.1c258.1-165.5,516.2-330.9,775.1-496.9c-4.1-1.6-378.2-119.5-388.9-123.6c-30.7-12-50.5-43-52-75.9
        c-2-44.5,35.1-87.9,87.8-87.7c156.5,0.5,473.8,0.2,476.2,0.2c0,33,0,65.6,0,98.7c-129.3,0-258.7,0-388.1,0
        c-0.1,0.3,218.8,69.6,326.4,103.2c29.9,9.3,50.9,27.6,59.3,58.6c8.9,33.3-3.7,68.4-32.6,87.2c-55.6,36.3-682.7,437.1-685.2,437.1
        c-58.2,0.1-176.7,0.1-177.8,0.1C0.2,784.8,0.1,784.5,0,784.1z"/>
      
    <path class="L" d="M1239.6,785.2c-1.7,0-486.9,0.1-727.9-0.1c-33.8,0-58.7-15.8-72.6-46.4c-14-30.8-10.9-65.2,12.1-86.5
        c22-20.4,445-289.4,447-290.7c0.1,1.7,0.3,76.5,0.4,112.6c0,3.7-320.6,210.2-323.1,212c3.2,0,337.4,0,502.5,0.1c1.7,0,4-0.4,5.9,0.3
        c1.9,0.7,3.1,1.7,4.7,2.7C1137.7,719.9,1239.7,784.9,1239.6,785.2z"/>
    </svg>
</a>

【参考方案1】：

您可以将transform 属性与一些translate 一起使用

body 
  background: black


path 
  fill: white;



/* Set animation here */

@keyframes comeFromTop 
  0% 
    transform: translateX(-100%) translateY(-100%);
  
  100% 
    transform: translateX(0%) translateY(0%);
  


@keyframes fadein 
  0% 
    fill: black;
  
  50% 
    fill: gray;
  
  100% 
    fill: white;
  


@keyframes fadein2 
  0% 
    fill: black;
  
  50% 
    fill: black;
  
  100% 
    fill: white;
  


.svg-wrapper:hover .S 
  animation: 1s fadein;


.svg-wrapper 
  animation: 1s comeFromTop;


.svg-wrapper:hover .L 
  animation: 1s fadein2;

<a href="" class="svg-wrapper" style="margin: 100px auto; display: block; width: 200px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1239.6 785.2">
    
    <path class="S" d="M0,784.1c258.1-165.5,516.2-330.9,775.1-496.9c-4.1-1.6-378.2-119.5-388.9-123.6c-30.7-12-50.5-43-52-75.9
        c-2-44.5,35.1-87.9,87.8-87.7c156.5,0.5,473.8,0.2,476.2,0.2c0,33,0,65.6,0,98.7c-129.3,0-258.7,0-388.1,0
        c-0.1,0.3,218.8,69.6,326.4,103.2c29.9,9.3,50.9,27.6,59.3,58.6c8.9,33.3-3.7,68.4-32.6,87.2c-55.6,36.3-682.7,437.1-685.2,437.1
        c-58.2,0.1-176.7,0.1-177.8,0.1C0.2,784.8,0.1,784.5,0,784.1z"/>
      
    <path class="L" d="M1239.6,785.2c-1.7,0-486.9,0.1-727.9-0.1c-33.8,0-58.7-15.8-72.6-46.4c-14-30.8-10.9-65.2,12.1-86.5
        c22-20.4,445-289.4,447-290.7c0.1,1.7,0.3,76.5,0.4,112.6c0,3.7-320.6,210.2-323.1,212c3.2,0,337.4,0,502.5,0.1c1.7,0,4-0.4,5.9,0.3
        c1.9,0.7,3.1,1.7,4.7,2.7C1137.7,719.9,1239.7,784.9,1239.6,785.2z"/>
    </svg>
</a>