I only occasionally produce animated SVGs with inline CSS embedded, and usually just crib what I need from animate.css because I'm doing really basic fades and entrances. In the test file below I'm really trying to do two things with an object: Have it briefly scale up as if it were coming directly at the viewer, and then drop-fade out of sight. But in the test, the scale effect is going up and swinging around to the left in a circular motion rather than scaling correctly from the center point. I don't have a clear grip on whether I should be using scale or scale3d to achieve the scale effect and how that would properly lead into the drop-fade. I'd greatly appreciate any help--thanks.

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
      <defs>
        <style>
          .cls-1 {
            fill: #b3b3b3;
          }
          .cls-2 {
            fill: #ccc;
          }
            #fall1, #fall2, #fall3, #fall4 {
                animation-fill-mode: both;
                animation-name: fadeOutDown;
                animation-duration: 2s;
            }
            #fall1 {
                animation-delay: 1s;
            }
            #fall2 {
                animation-delay: 1.2s;
            }
            #fall3 {
                animation-delay: 1.4s;
            }
            #fall4 {
                animation-delay: 1.6s;
            }
            @keyframes fadeOutDown {
                0 {
                    opacity: 1;
                }
                20% {
                    opacity: 1;
                    transform: scale(1.5) ;
                    transform-origin: 50% 50% 0;
                }
                100% {
                    opacity: 0;
                    transform: translate3d(0, 100%, 0);
                }
            }
        </style>
      </defs>
      <g id="fall1">
        <rect  x="433" y="104" width="118" height="118"/>
      </g>
      <g id="fall2">
        <rect  x="551" y="104" width="118" height="118"/>
      </g>
      <g id="fall3">
        <rect  x="669" y="104" width="118" height="118"/>
      </g>
      <g id="fall4">
        <rect  x="787" y="104" width="118" height="118"/>
      </g>
    </svg>

CodePudding user response：

I think you're mainly missing transform-box: fill-box

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
      <defs>
        <style>
          .cls-1 {
            fill: #b3b3b3;
          }
          .cls-2 {
            fill: #ccc;
          }
            #fall1, #fall2, #fall3, #fall4 {
                animation-fill-mode: both;
                animation-name: fadeOutDown;
                animation-duration: 2s;
                transform-origin: 50% 50%;
                transform-box: fill-box;
            }
            #fall1 {
                animation-delay: 1s;
            }
            #fall2 {
                animation-delay: 1.2s;
            }
            #fall3 {
                animation-delay: 1.4s;
            }
            #fall4 {
                animation-delay: 1.6s;
            }
            @keyframes fadeOutDown {
                0 {
                    opacity: 1;
                }
                20% {
                    opacity: 1;
                    transform: scale(1.5);
                }
                100% {
                    opacity: 0;
                    transform: translate3d(0, 100%, 0);
                }
            }
        </style>
      </defs>
      <g id="fall1">
        <rect  x="433" y="104" width="118" height="118"/>
      </g>
      <g id="fall2">
        <rect  x="551" y="104" width="118" height="118"/>
      </g>
      <g id="fall3">
        <rect  x="669" y="104" width="118" height="118"/>
      </g>
      <g id="fall4">
        <rect  x="787" y="104" width="118" height="118"/>
      </g>
    </svg>