Css animation has strange delay when animating two SVG properties

Question

As the title said when I tried to animate the stroke-dashoffset and fill at the same time. It has this strange unwanted 3-second delay, but I have both of the animated properties are in one keyframe as shown below I have attempted research by visiting the following URL: Play multiple CSS animations at the same time CSS 3 weird animation

Accepted Answer

The way you write the @keyframes rule, it seems you expect the stroke-dashoffset to start at the begining of the animation duration, and to end at its end. But in fact, you have absolutely no control about that the way your code is structured. You write stroke-dasharray: 1800 and assume that 1800px is the total stroke length.Stroke length for glyphs in a text is the length of the outline for each individual glyph. Each glyph has a different stroke length.If a glyph consists of multiple subpaths, like the letter “o” consists of an outer and an inner line, the stroke-dasharray is defined for each of them individually. You then have multiple animated lengths in one combined stroke.You give a non-standard font-family, but do not include a web font source. This means everyone who has not, by chance, installed the exact font you assume, will see a text in a different replacement font with different stroke lengths.You define a fallback font. Both fonts will have different stroke lengths.There is only one way to get out of this dilemma and gain control of the stroke lengths and subsequent animation timings: use a vector grafics editor to convert the text into paths. (Adobe Illustrator, which you seem to use, can do that.) Remember to set an aria-label attribute to anotate the enclosing element with the text it originally represented.SVG elements have a pathLength attribute where you can simply overrride the measured stroke length with a make-believe one. If you then use that value for your stroke-dasharray property, the animation will run as if the correct stroke length had been used. The following code will show a stroke along exactly the half of the path length: Note the negative number for stroke-dashoffset. (I am going to bail out on describing the complicated reasons here, they could fill a whole tutorial.) svg { background-color:black;}.label path { fill: white; stroke: white; stroke-dasharray: 100; stroke-dashoffset: 0; animation: reveal 10s cubic-bezier(0, 0.23, 1, 0.1);}@keyframes reveal { 0% { fill: none; stroke-dashoffset: -100; } 80% { fill: rgba(255, 255, 255, 0); } 100% { fill: rgba(255, 255, 255, 1); stroke-dashoffset: 0; }}

Advertisement

Answer