circle animationが上手く動かない（タイマー作成）「addAnimation」

円形のタイマー作成上の質問です

●やりたいこと
円形のタイマーを作りたい。

●状況
タイマーを作成していて、カウント自体は実装できたのすが、
そこに1分で一周する円形の進捗を表す図形を作成する所でずっと悩んでいます。
円形（Circle）を作成してanimationをつけたのですが
アニメーションが上手く作動しません。
ちょこちょこ設定を変えてみたのですが、
丸い線に沿って、時間（1分間）と共に色が変化（くるっと一周する）しません。
ただの濃いピンクの円が表示されるのみです。
何か足りなかったり、ミスしている設定があるのでしょうか。
HTML,CSS,Jquery,Javascriptで作成しています。

下記にコードを貼りますので、何かご教示いただけますでしょうか。
よろしくお願いいたします。

※「play」ボタンを押下したら、アニメーションがスタートして
1分かけて1周する動きを想定しています。
（元々濃いピンクの円形があり、時間の経過に伴い薄いピンクになっていくイメージです）
（くるっと1周します）
下、完成イメージ図

html
1    <div class="wrap">
2        <div id="timer">
3            <!-- 円 -->
4            <svg width="260" height="260">
5                <circle class="defaultCircle" cx="125" cy="125" r="120" stroke="#ff88fb" stroke-width="10" fill="none" stroke-linecap="round"/>
6                <circle id="animateCircle" cx="125" cy="125" r="120" stroke="#d459cb" stroke-width="10" fill="none" stroke-linecap="round" />
7             </svg>
8
9             <!-- タイマー -->
10             <span id="hour">00</span>:
11             <span id="minute">00</span>:
12             <span id="second">00</span>:
13             <span id="millisecond">00</span>
14         </div>
15        <p>Your time starts now</p>
16        <div class="option">
17            <a id="play" onclick="playFunc();" href="javascript:void(0)"><i class="fa fa-play"></i>play</a>
18            <a id="stop" onclick="stopFunc();" href="javascript:void(0)"><i class="fa fa-stop"></i>STOP</a>
19            <a id="reset" onclick="resetFunc();" href="javascript:void(0)"><i class="fa fa-undo"></i>reset</a>
20        </div>
21    </div>

css
1*{margin: 0;padding: 0;box-sizing: border-box;}
2        body{
3            font-weight: 300px;
4            background: linear-gradient(to left, #607d8b,#d459cb);
5            display: flex;
6            justify-content: center;
7            align-items: center;
8            height: 100vh;
9        }
10
11        .wrap{
12            display: inline-block;
13            min-width: 360px;
14            min-height: 400px;
15            padding: 50px 15px;
16            background-color: #fff;
17            box-shadow: 0 5px 25px #0000004a;
18            border-radius: 8px;
19            text-align: center;
20        }
21        #timer{
22            position: relative;
23            width: 250px;
24            height: 250px;
25            line-height: 250px;
26            border-radius: 50%;
27            font-size: 32px;
28            margin: 0 auto;
29            background-color: #fff;
30        }
31
32        p{
33            font-weight: 400;
34            color: gray;
35            padding: 30px 0;
36        }
37
38        .option a{
39            display: inline-block;
40            margin: 0 10px;
41            text-decoration: none;
42
43        }
44
45        #play, #reset{
46            width: 55px;
47            height: 45px;
48            line-height: 45px;
49            border-radius: 50px;
50            color: #fff;
51            background: linear-gradient(45deg, #ff88fb, #ff00ec);
52            box-shadow: 0 8px 25px #bf5fc045, 0 8px 25px #ff00ec50;
53            transition: all ease 0.1s;
54
55        }
56
57        #stop{
58            padding:15px 20px;
59            border-radius: 50px;
60            color: #fff;
61            font-weight: 400;
62            background: linear-gradient(45deg, #607d8b, #ff00ec);
63            box-shadow: 0 8px 25px #bf5fc045, 0 8px 25px #ff00ec50;
64            transition: all ease 0.1s;
65
66        }
67        #play:active, #reset:active, #stop:active{
68            transform: scale(0.95);
69        }
70
71        .pause .fa-play,
72        .fa-pause{
73            display: none;
74        }
75
76        .pause .fa-pause{
77            display: inline-block;
78        }
79
80        /* circle animation */
81        /* 今回の該当箇所はここから下だと思います */
82        #timer svg{
83            position: absolute;
84            left: 0;
85        }
86
87        #animateCircle.addAnimation{
88            stroke-dasharray: 770;
89            stroke-dashoffset: -770;
90            animation: animateCircle 60s linear infinite;
91            animation-play-state: paused;
92        }
93        @keyframes animateCircle{
94            from{
95                stroke-dashoffset: 0;
96            }
97        }
98
99        .defaultCircle{
100            opacity: .3;
101        }

script
1let base;
2        let playPause = 0;
3
4        function playFunc(){
5            playPause = playPause + 1;
6            if( playPause === 1){
7                play();
8                document.getElementById("play").classList.add("pause");
9                $("#play").html("stop");
10                $("#play").css("background","linear-gradient(45deg, #607d8b, #ff00ec)");
11                $("#animateCircle").addClass("addAnimation");
12                $("#animateCircle.addAnimation").css("animation-play-state", "running");
13            }else if(playPause === 2){
14                document.getElementById("play").classList.remove("pause");
15                $("#play").html("play");
16                $("#play").css("background", "linear-gradient(45deg, #ff88fb, #ff00ec)");
17                $("#animateCircle").css("animation-play-state", "paused");  
18                playPause = 0;
19                stop();
20            }
21        }