I need to animate this svg from Top left to Bottom right just like an gif I pasted the link below. 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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
You can use transform
property with some 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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>