从左上角到右下角的 SVG 动画

Question

我需要将此 svg 从左上角动画化到右下角，就像我在下面粘贴 link 的 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>

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

从左上角到右下角的 SVG 动画

SVG Animation from Top left to bottom right

css

animation

svg

svg-animate