Draw and fill?

[lurtnowski]

I have a SVG with a bunch of

<rect>

and am trying to get it to draw, the border, then fill it

#floor-plan rect {
    stroke: #000;
    stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 5s linear forwards;
  animation: fill .5s ease forwards 4s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fill {
  from {
	fill:transparent;
  }
  to {
	fill:white;
  }
}

the fill is the only thing working, I cant to both?

[Ray.H]

@lurtnowski

the fill is the only thing working, I cant to both?

The animation rule lower down in your css is overriding the previous rule.

You should be able to do that with comma separated values.

Setting multiple animation property values

  animation: draw 5s linear, fill .5s ease 4s;

Also, see animation-direction for the proper values. Where you have forwards, it is actually called normal.

[PaulOB]

@Ray.H

for the proper values. Where you have forwards, it is actually called normal .

Yes but the value for animation-fill-mode is forwards if you want the styles to be persistent at the end of the animation.

animation: draw 5s linear forwards, fill .5s ease forwards 4s;

animation-direction is whether you want the animation to go backwards or forwards and that is normal or reverse.

[etidd]

Sorry to butt in here, but I just thought it was worth noting that this CSS animation is surprisingly compatible across browsers (according to that Mozilla tutorial).

[PaulOB]

@etidd

that this CSS animation is surprisingly compatible across browsers

CSS animation has been supported by modern browsers for quite a few years now

[Ray.H]

@PaulOB

Yes but the value for animation-fill-mode is forwards…

animation-direction is… normal or reverse.

Thanks for pointing that out Paul, I wasn’t aware of animation-fill-mode