Home > Blockchain >  SVG line and opacity change animation
SVG line and opacity change animation

Time：04-12

I am look to have the opacity of the fill turn t0 1 after the the stork animation is done. I am have trouble figuring this out.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(32, 35, 48);
  text-aline: center;
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  stroke: 5px;
  /*animation: fill 4s ease forwards 4.5s;*/
}

#logo>g.letters>path:nth-child(1) {
  stroke-dasharray: 310px;
  stroke-dashoffset: 310px;
  animation: line-anim 4s ease forwards;
}

#logo>g.letters>path:nth-child(2) {
  stroke-dasharray: 410px;
  stroke-dashoffset: 410px;
  animation: line-anim 4s ease forwards 0.3s;
}

#logo>g.letters>path:nth-child(3) {
  stroke-dasharray: 430px;
  stroke-dashoffset: 430px;
  animation: line-anim 4s ease forwards 0.6s;
}

#logo>g.letters>path:nth-child(4) {
  stroke-dasharray: 220px;
  stroke-dashoffset: 220px;
  animation: line-anim 2s ease forwards 0.9s;
}

#logo>g.letters>path:nth-child(5) {
  stroke-dasharray: 520px;
  stroke-dashoffset: 520px;
  animation: line-anim 4s ease forwards 1.2s;
}

#logo>g.letters>path:nth-child(6) {
  stroke-dasharray: 520px;
  stroke-dashoffset: 520px;
  animation: line-anim 4s ease forwards 1.5s;
}

#logo>g.letters>path:nth-child(7) {
  stroke-dasharray: 410px;
  stroke-dashoffset: 410px;
  animation: line-anim 4s ease forwards 1.8s;
}

#logo>g.letters>path:nth-child(8) {
  stroke-dasharray: 390px;
  stroke-dashoffset: 390px;
  animation: line-anim 4s ease forwards 2.2s;
}

@keyframes line-anim {
  to {
    stroke-dashoffset: 0px;
  }
}

@keyframes fill {
  from {
    opacity: 0;
  }
  to {
    fill: white;
    opacity: 1;
  }
}
<svg id="logo" width="626" height="103" viewBox="0 0 626 103" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g >
<path  d="M38.664 6.28C48.136 6.28 56.4133 8.15733 63.496 11.912C70.5787 15.6667 76.04 20.9573 79.88 27.784C83.8053 34.5253 85.768 42.3333 85.768 51.208C85.768 59.9973 83.8053 67.8053 79.88 74.632C76.04 81.4587 70.536 86.7493 63.368 90.504C56.2853 94.2587 48.0507 96.136 38.664 96.136H5V6.28H38.664ZM37.256 77.192C45.5333 77.192 51.976 74.9307 56.584 70.408C61.192 65.8853 63.496 59.4853 63.496 51.208C63.496 42.9307 61.192 36.488 56.584 31.88C51.976 27.272 45.5333 24.968 37.256 24.968H26.888V77.192H37.256Z" stroke="white" stroke-width="10" fill="white" />
<path d="M119.888 23.816V41.992H149.2V58.888H119.888V78.6H153.04V96.136H98V6.28H153.04V23.816H119.888Z" stroke="white" stroke-width="10" />
<path d="M199.762 97.032C193.191 97.032 187.303 95.9653 182.098 93.832C176.893 91.6987 172.711 88.5413 169.554 84.36C166.482 80.1787 164.861 75.144 164.69 69.256H187.986C188.327 72.584 189.479 75.144 191.442 76.936C193.405 78.6427 195.965 79.496 199.122 79.496C202.365 79.496 204.925 78.7707 206.802 77.32C208.679 75.784 209.618 73.6933 209.618 71.048C209.618 68.8293 208.85 66.9947 207.314 65.544C205.863 64.0933 204.029 62.8987 201.81 61.96C199.677 61.0213 196.605 59.9547 192.594 58.76C186.791 56.968 182.055 55.176 178.386 53.384C174.717 51.592 171.559 48.9467 168.914 45.448C166.269 41.9493 164.946 37.384 164.946 31.752C164.946 23.3893 167.975 16.8613 174.034 12.168C180.093 7.38933 187.986 5 197.714 5C207.613 5 215.591 7.38933 221.65 12.168C227.709 16.8613 230.951 23.432 231.378 31.88H207.698C207.527 28.9787 206.461 26.7173 204.498 25.096C202.535 23.3893 200.018 22.536 196.946 22.536C194.301 22.536 192.167 23.2613 190.546 24.712C188.925 26.0773 188.114 28.0827 188.114 30.728C188.114 33.6293 189.479 35.8907 192.21 37.512C194.941 39.1333 199.207 40.8827 205.01 42.76C210.813 44.7227 215.506 46.6 219.09 48.392C222.759 50.184 225.917 52.7867 228.562 56.2C231.207 59.6133 232.53 64.008 232.53 69.384C232.53 74.504 231.207 79.1547 228.562 83.336C226.002 87.5173 222.247 90.8453 217.298 93.32C212.349 95.7947 206.503 97.032 199.762 97.032Z" stroke="white" stroke-width="10" />
<path d="M267.888 6.28V96.136H246V6.28H267.888Z" stroke="white" stroke-width="10" />
<path d="M343.398 34.696C341.777 31.7093 339.43 29.448 336.358 27.912C333.371 26.2907 329.83 25.48 325.734 25.48C318.651 25.48 312.977 27.8267 308.71 32.52C304.443 37.128 302.31 43.3147 302.31 51.08C302.31 59.3573 304.529 65.8427 308.966 70.536C313.489 75.144 319.675 77.448 327.526 77.448C332.902 77.448 337.425 76.0827 341.094 73.352C344.849 70.6213 347.579 66.696 349.286 61.576H321.51V45.448H369.126V65.8C367.505 71.2613 364.731 76.3387 360.806 81.032C356.966 85.7253 352.059 89.5227 346.086 92.424C340.113 95.3253 333.371 96.776 325.862 96.776C316.987 96.776 309.051 94.856 302.054 91.016C295.142 87.0907 289.723 81.672 285.798 74.76C281.958 67.848 280.038 59.9547 280.038 51.08C280.038 42.2053 281.958 34.312 285.798 27.4C289.723 20.4027 295.142 14.984 302.054 11.144C308.966 7.21866 316.859 5.256 325.734 5.256C336.486 5.256 345.531 7.85866 352.87 13.064C360.294 18.2693 365.201 25.48 367.59 34.696H343.398Z" stroke="white" stroke-width="10" />
<path d="M461.634 96.136H439.746L403.138 40.712V96.136H381.25V6.28H403.138L439.746 61.96V6.28H461.634V96.136Z" stroke="white" stroke-width="10" />
<path d="M499.388 23.816V41.992H528.7V58.888H499.388V78.6H532.54V96.136H477.5V6.28H532.54V23.816H499.388Z" stroke="white" stroke-width="10" />
<path d="M592.574 96.136L573.886 62.216H568.638V96.136H546.75V6.28H583.486C590.569 6.28 596.585 7.51733 601.534 9.992C606.569 12.4667 610.323 15.88 612.798 20.232C615.273 24.4987 616.51 29.2773 616.51 34.568C616.51 40.5413 614.803 45.8747 611.39 50.568C608.062 55.2613 603.113 58.5893 596.542 60.552L617.278 96.136H592.574ZM568.638 46.728H582.206C586.217 46.728 589.203 45.7467 591.166 43.784C593.214 41.8213 594.238 39.048 594.238 35.464C594.238 32.0507 593.214 29.3627 591.166 27.4C589.203 25.4373 586.217 24.456 582.206 24.456H568.638V46.728Z" stroke="white" stroke-width="10" />
    </g>
</svg>

CodePudding user response：

The opacity property will change the opacity of the entire element, stroke and fill. To animate the fill you can use fill-opacity.

PS: you can set the attribute pathLength on all the <path>s with the same value, like pathLength="10". And instead of individual stroke-dasharray and stroke-offset properties you can have a common selector that looks like:

#logo>g.letters>path {
  stroke-dasharray: 10px;
  stroke-offset: 10px; 
}

You still need the individual selectors if the timing is different for each.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(32, 35, 48);
  text-aline: center;
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  stroke: 5px;
  fill: white;
  fill-opacity: 0;
  animation: fill 4s ease forwards 4.5s;
}

#logo>g.letters>path:nth-child(1) {
  stroke-dasharray: 310px;
  stroke-dashoffset: 310px;
  animation: line-anim 4s ease forwards;
}

#logo>g.letters>path:nth-child(2) {
  stroke-dasharray: 410px;
  stroke-dashoffset: 410px;
  animation: line-anim 4s ease forwards 0.3s;
}

#logo>g.letters>path:nth-child(3) {
  stroke-dasharray: 430px;
  stroke-dashoffset: 430px;
  animation: line-anim 4s ease forwards 0.6s;
}

#logo>g.letters>path:nth-child(4) {
  stroke-dasharray: 220px;
  stroke-dashoffset: 220px;
  animation: line-anim 2s ease forwards 0.9s;
}

#logo>g.letters>path:nth-child(5) {
  stroke-dasharray: 520px;
  stroke-dashoffset: 520px;
  animation: line-anim 4s ease forwards 1.2s;
}

#logo>g.letters>path:nth-child(6) {
  stroke-dasharray: 520px;
  stroke-dashoffset: 520px;
  animation: line-anim 4s ease forwards 1.5s;
}

#logo>g.letters>path:nth-child(7) {
  stroke-dasharray: 410px;
  stroke-dashoffset: 410px;
  animation: line-anim 4s ease forwards 1.8s;
}

#logo>g.letters>path:nth-child(8) {
  stroke-dasharray: 390px;
  stroke-dashoffset: 390px;
  animation: line-anim 4s ease forwards 2.2s;
}

@keyframes line-anim {
  to {
    stroke-dashoffset: 0px;
  }
}

@keyframes fill {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}
<svg id="logo" width="626" height="103" viewBox="0 0 626 103" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g >
<path  d="M38.664 6.28C48.136 6.28 56.4133 8.15733 63.496 11.912C70.5787 15.6667 76.04 20.9573 79.88 27.784C83.8053 34.5253 85.768 42.3333 85.768 51.208C85.768 59.9973 83.8053 67.8053 79.88 74.632C76.04 81.4587 70.536 86.7493 63.368 90.504C56.2853 94.2587 48.0507 96.136 38.664 96.136H5V6.28H38.664ZM37.256 77.192C45.5333 77.192 51.976 74.9307 56.584 70.408C61.192 65.8853 63.496 59.4853 63.496 51.208C63.496 42.9307 61.192 36.488 56.584 31.88C51.976 27.272 45.5333 24.968 37.256 24.968H26.888V77.192H37.256Z" stroke="white" stroke-width="10" />
<path d="M119.888 23.816V41.992H149.2V58.888H119.888V78.6H153.04V96.136H98V6.28H153.04V23.816H119.888Z" stroke="white" stroke-width="10" />
<path d="M199.762 97.032C193.191 97.032 187.303 95.9653 182.098 93.832C176.893 91.6987 172.711 88.5413 169.554 84.36C166.482 80.1787 164.861 75.144 164.69 69.256H187.986C188.327 72.584 189.479 75.144 191.442 76.936C193.405 78.6427 195.965 79.496 199.122 79.496C202.365 79.496 204.925 78.7707 206.802 77.32C208.679 75.784 209.618 73.6933 209.618 71.048C209.618 68.8293 208.85 66.9947 207.314 65.544C205.863 64.0933 204.029 62.8987 201.81 61.96C199.677 61.0213 196.605 59.9547 192.594 58.76C186.791 56.968 182.055 55.176 178.386 53.384C174.717 51.592 171.559 48.9467 168.914 45.448C166.269 41.9493 164.946 37.384 164.946 31.752C164.946 23.3893 167.975 16.8613 174.034 12.168C180.093 7.38933 187.986 5 197.714 5C207.613 5 215.591 7.38933 221.65 12.168C227.709 16.8613 230.951 23.432 231.378 31.88H207.698C207.527 28.9787 206.461 26.7173 204.498 25.096C202.535 23.3893 200.018 22.536 196.946 22.536C194.301 22.536 192.167 23.2613 190.546 24.712C188.925 26.0773 188.114 28.0827 188.114 30.728C188.114 33.6293 189.479 35.8907 192.21 37.512C194.941 39.1333 199.207 40.8827 205.01 42.76C210.813 44.7227 215.506 46.6 219.09 48.392C222.759 50.184 225.917 52.7867 228.562 56.2C231.207 59.6133 232.53 64.008 232.53 69.384C232.53 74.504 231.207 79.1547 228.562 83.336C226.002 87.5173 222.247 90.8453 217.298 93.32C212.349 95.7947 206.503 97.032 199.762 97.032Z" stroke="white" stroke-width="10" />
<path d="M267.888 6.28V96.136H246V6.28H267.888Z" stroke="white" stroke-width="10" />
<path d="M343.398 34.696C341.777 31.7093 339.43 29.448 336.358 27.912C333.371 26.2907 329.83 25.48 325.734 25.48C318.651 25.48 312.977 27.8267 308.71 32.52C304.443 37.128 302.31 43.3147 302.31 51.08C302.31 59.3573 304.529 65.8427 308.966 70.536C313.489 75.144 319.675 77.448 327.526 77.448C332.902 77.448 337.425 76.0827 341.094 73.352C344.849 70.6213 347.579 66.696 349.286 61.576H321.51V45.448H369.126V65.8C367.505 71.2613 364.731 76.3387 360.806 81.032C356.966 85.7253 352.059 89.5227 346.086 92.424C340.113 95.3253 333.371 96.776 325.862 96.776C316.987 96.776 309.051 94.856 302.054 91.016C295.142 87.0907 289.723 81.672 285.798 74.76C281.958 67.848 280.038 59.9547 280.038 51.08C280.038 42.2053 281.958 34.312 285.798 27.4C289.723 20.4027 295.142 14.984 302.054 11.144C308.966 7.21866 316.859 5.256 325.734 5.256C336.486 5.256 345.531 7.85866 352.87 13.064C360.294 18.2693 365.201 25.48 367.59 34.696H343.398Z" stroke="white" stroke-width="10" />
<path d="M461.634 96.136H439.746L403.138 40.712V96.136H381.25V6.28H403.138L439.746 61.96V6.28H461.634V96.136Z" stroke="white" stroke-width="10" />
<path d="M499.388 23.816V41.992H528.7V58.888H499.388V78.6H532.54V96.136H477.5V6.28H532.54V23.816H499.388Z" stroke="white" stroke-width="10" />
<path d="M592.574 96.136L573.886 62.216H568.638V96.136H546.75V6.28H583.486C590.569 6.28 596.585 7.51733 601.534 9.992C606.569 12.4667 610.323 15.88 612.798 20.232C615.273 24.4987 616.51 29.2773 616.51 34.568C616.51 40.5413 614.803 45.8747 611.39 50.568C608.062 55.2613 603.113 58.5893 596.542 60.552L617.278 96.136H592.574ZM568.638 46.728H582.206C586.217 46.728 589.203 45.7467 591.166 43.784C593.214 41.8213 594.238 39.048 594.238 35.464C594.238 32.0507 593.214 29.3627 591.166 27.4C589.203 25.4373 586.217 24.456 582.206 24.456H568.638V46.728Z" stroke="white" stroke-width="10" />
    </g>
</svg>

Page link：https//www.codepudding.com/Blockchain/368769.html

Prev:animate.js Fix motion path so edge of svg is always on edge with other svg
Next:strange std::list iteration behavior
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding