Question: I would like to move the animation from HTML to 
css. I would like to add it as an animation only when you hover over `<circle id="circle"..`

```
 <svg height=600 width=800>
        <g>
          <circle id="circle" cx="400" cy="300" r="130" />
            <path id="arc" d="M395 170.1
                  A 130 130, 0, 1, 0, 400 170 Z"
                    stroke="green"  fill="transparent"/>
                    <text id="circleText" width="500">
                      <textPath id="circleTextPath" xlink:href="#arc" startOffset="48%">
                        Resume
                        <animate attributeName="startOffset"
                        from="48%" to ="90%"
                        begin="0s" dur="5s"
                        repeatCount="1"/>
                        <animate attributeName="startOffset"
                        from="90%" to ="48%"
                        begin="5s" dur="4s"
                        repeatCount="1"/>
                      </textPath>
        </g>
      </svg>

```

My fiddle: <https://jsfiddle.net/ezouras/1ndac69e/>

Answer: 
You can't animate `startOffset` with CSS. It is not one of the designated [properties](https://www.w3.org/TR/SVG/single-page.html#intro-TermProperty) that can be styled with CSS.

You would need to either use SMIL animation (as you are doing now), or Javascript.

However since your path is simply a circle, why not just move the text by rotating the `<textPath>`?

```css
.flex{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    circle {
      fill: white;
      stroke: yellow;
      stroke-width: 2;
    }

#circle-and-text:hover {
  transform-origin: 400px 300px;
  animation-name: rotator;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }

  55% {
    transform: rotate(-151deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
```

```html
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>swing Text</title>
  </head>
  <body>
   <div class="flex">
     <svg height=600 width=800>
       <g id="circle-and-text">
         <circle 
          id="circle" 
          cx="400" cy="300" 
          r="130" />
         <path id="arc" d="M395 170.1 A 130 130, 0, 1, 0, 400 170 Z"
           stroke="green"  fill="transparent"/>
         <text id="circleText" width="500">
           <textPath id="circleTextPath" xlink:href="#arc"
            startOffset="48%">
               Resume
            </textPath>
          </text>
        </g>
      </svg>

    </div>
  </body>
</html>
```
You need to modify your `<animate>` begin when the mouse hovers over the path of the circle and trigger the second animation after 5 seconds have been elapsed since the beginning of the first animation by modifying these two lines.

```
<animate attributeName="startOffset"
               from="48%" to ="90%"
               begin="arc.mouseover" dur="5s"
               repeatCount="1" id="go"/>
<animate attributeName="startOffset"
                from="90%" to ="48%"
                begin="go.begin + 5" dur="4s"
                repeatCount="1"/>

```

'go' is the id given to the first animation. The second animation can be started at any time elapsed with reference to the beginning of the first animation using 'go.begin + seconds' or if it has to be started when the first animation ends, 'go.end'.

Working solution:

```css
.flex{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    circle {
      fill: white;
      stroke: yellow;
      stroke-width: 2;
    }
```

```html
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>swing Text</title>
  </head>
  <body>
   <div class="flex">
     <svg height=600 width=800>
       <g>
         <circle 
          id="circle" 
          cx="400" cy="300" 
          r="130" />
         <path id="arc" d="M395 170.1
           A 130 130, 0, 1, 0, 400 170 Z"
           stroke="green"  fill="transparent"/>
         <text id="circleText" width="500">
           <textPath id="circleTextPath" xlink:href="#arc"
            startOffset="48%">
               Resume
             <animate attributeName="startOffset"
               from="48%" to ="90%"
               begin="arc.mouseover" dur="5s"
               repeatCount="1" id="go"/>
               <animate attributeName="startOffset"
                from="90%" to ="48%"
                begin="go.begin + 5" dur="4s"
                repeatCount="1"/>
            </textPath>
            </text>
        </g>
      </svg>

    </div>
  </body>
</html>
```