Starting a SVG animation with keyframes using "begin" property

Question

I'm actually learning SVG in order to import a vector animation I did in Flash inside a website, then integrate some "interactivity" (with the SVG property begin="mouseover").

So first, here is a very simple example of SVG animation I made with the help of the Flash plugin called "Flash2SVG" : https://codepen.io/Rojiraan/pen/owboXr

(StackOverflow want some code when using a Codepen.io link, the problem is that my SVG is way too long, so I did an ultra conversion of my HTML code)

<div class="svg-container">
<svg version="1.1" class="svg-content" viewBox="0 0 550 400" preserveAspectRatio="xMinYMin meet">
   <g id="SEQUENCE_No1" overflow="visible">
      <g id="THE_RED_RECTANGLE" transform="translate(71 68.05)">
         <g>
            <g id="Layer11_0_FILL">
               <path fill="#F30" stroke="none" d="M408 263.95L408 0 0 0 0 263.95 408 263.95Z"/>
            </g>
         </g>
      </g>
      <g display="none">
         <g>
            <g id="Layer10_0_FILL">
               <path fill="#6CF" stroke="none" d="some numbers..."/>
            </g>
         </g>
         <animate attributeName="display" repeatCount="indefinite" dur="3.333s" keyTimes="0;.9;1" values="none;inline;inline"/>
      </g>
      <g display="none">
         <g>
            <g id="Layer9_0_FILL">
               <path fill="#6CF" stroke="none" d="some numbers..."/>
            </g>
         </g>
         <animate attributeName="display" repeatCount="indefinite" dur="3.333s" keyTimes="0;.8;.9;1" values="none;inline;none;none"/>
      </g>
     <!-- Et cetera... -->
</svg>
</div>

What I want to do is to start the animation (with the little blue points) when I'm hovering the red rectangle. The thing is I don't really know where to put my "begin" property, I tried various thing without success.

Thanks a lot for reading & for the help !