I have had a little bit of time off for holiday shut down. I’m starting to teach myself CSS animations. This is a pretty cool feature, and I can’t wait to see more of this feature.

The @keyframes are defined as follows. Of course, that might change post-publication.

$time-start: 0%;$time-square-draw-start: 5%;
$time-square-draw-end: 15%;$time-circle-draw-start: 15%;
$time-circle-draw-end: 25%;$time-circle-shift-start: 25%;
$time-circle-shift-end: 35%;$time-rotate-start: 35%;
$time-rotate-end: 45%;$time-heart-draw-start: 45%;
$time-heart-draw-end: 55%;$time-trace-erase-start: 55%;
$time-trace-erase-end: 65%;$time-heart-fill-start: 65%;
$time-heart-fill-end: 75%;$time-fade-out-start: 95%;
\$time-end: 100%;


See the Pen SVG Square Heart Animation by Jarrett M (@jarrettmeyer) on CodePen.