Keyframes are an SVG media type used in animations. They are defined in the '<style>' section of your HTML.
First we define a style for the 'path' command:
path {
stroke-dashoffset: -1;
stroke-linejoin: round;
stroke-linecap: round;
animation: draw 5s ease-in;
}
In English:
- 'stroke-dashoffset' is the distance in the dash pattern where the start of the path will be positioned
- 'stroke-linejoin' controls what happens at a sharp corner in the path (round, bevel, mitre)
- 'stroke-linecap' controls what an open end of a path will look like (butt, round, square)
- 'animation' uses the named keyframes style to know what to do, and when
Now our 2 paths are defined in the SVG section:
transform="translate(20,150) scale(10)"
d="M10,6 Q10,0 15,0T20,6Q20,10 15,14
T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z" />
transform="translate(480,150) scale(-10 10)"
d="M9,15C9,20 0,21 0,16S6,9 10,0C14,9 20,11 20,16
S11,20 11,15Q11,20 13,20H7Q9,20 9,15Z" />
Inside a keyframe definition, we set the CSS properties to change at each stage of the animation.
These stages are defined using a percentage of completion:
@keyframes draw {
0% {
stroke-dasharray: 0 83;
fill-opacity: 0;
}
90% {
stroke-dasharray: 83 0;
fill-opacity: 0;
}
100% {
stroke-dasharray: 83 0;
fill-opacity: 1;
}
}
Here we have the 3 keyframe definitions to draw the heart and spade.
- 'stroke-dasharray' is a list of the lengths of strokes and gaps
- 'fill-opacity' determines the ..... opacity of the fill! DUH
So at 0% our stroke is 0px long, and the gap is 83px. There is 0 fill opacity.
At 90% completion we indicate our stroke to be 83px long, with a gap of 0px. Since this is the opposite of the previous keyframe, our stroke becomes smooth. Our fill opacity is still 0.
Finally at 100% completion we retain our stroke / gap values, but change our fill opacity to 1. However this does not happen immediately but fades in slowly, because in our 'path' style, we indicated that:
animation: draw 5s ease-in;
All together, about 30 lines of code!