Convert SVG SMIL attribute animations to CSS

Question

Since the SVG SMIL animation is out of date, I am trying to convert the shape morph animation to CSS3 keyframe animation. Most conversions are straightforward, except where I use the path attribute d=.

For example, this SVG changes between 3 (actually 4, but the start / end are equal):

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 3">
    <path fill="#2ECC71" d="M0 9h9V0L0 0">
      <animate attributeName="d" 
               values="M0 9h9V0L0 0; M0 9h9V0L1 0; M0 9h9V0L1 1; M0 9h9V0L0 0"
               repeatCount="indefinite"
               calcMode="spline"
               keySplines=".75 .1 .25 .9; .75 .1 .25 .9; .75 .1 .25 .9" 
               keyTimes="0; .33; .66; 1"
               dur="10s" />
    </path>
  </svg>

My (rather optimistic) conversion to @keyframeslooks like

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 3">
    <defs>
      <style type="text/css">
        @keyframes anima {
          0% {
            d: M0 9h9V0L0 0;
          }
          33% {
            d: M0 9h9V0L1 0;
          }
          66% {
            d: M0 9h9V0L1 1;
          }
          100% {
            d: M0 9h9V0L0 0;
          }
        }

        #a {
          animation: anima 10s ease-in-out infinite;
        fill: #22A7F0;
        }
      </style>
    </defs>
    <path id="a" d="M0 9h9V0L0 0" />
  </svg>

As long as this makes the initial shape, there is no animation. The only browser that provides a hint - it's Firefox, which mentions: Unknown property 'd'. Declaration dropped.. This makes sense, although I cannot figure out how to declare a morph form without using SMIL.

Mandatory demo can be found on Codepen

SVG , javascript , ( SVG ). , , CSS transforms, SVG, , , .