svg 애니메이션 작동 안 됨 ㅠㅠ 채택완료

왜 스트로크가 작동 안할까요 ㅠㅠ 

http://sir.kr/data/editor/2410/3673009239_1727751368.1747.png" width="100%" />

.video-controls {   position: absolute;   left: 20px;   z-index: 1;   display: flex;   column-gap: 16px; }

#play-pause-btn {   position: relative;   width: 100px;   height: 100px;   border-radius: 50%;   background-image: url('../assets/btn_pause.svg');   background-repeat: no-repeat;   background-size: 20px 20px;   background-position: center;   overflow: hidden; }

.svg {   display: block;   margin: calc(50% - 40px) auto; }

.border {   fill: none;   stroke: white;   stroke-width: 3; }

.progress {   fill:none;   stroke: red;   stroke-width: 3;   stroke-dasharray: 251.2;   stroke-dashoffset: 251.2;   transform-origin: center;   transform: rotate(-90deg) }

@keyframes progress {   100%   {     stroke-dashoffset: 0;   } }

.video-controls button {   font-weight: 700;   font-size: 16px;   color: #ffffffcc; }

.video-controls button.active {   font-weight: 700;   font-size: 16px;   color: white;   text-decoration: underline;   text-decoration-thickness: 2px; }

css입니다 ㅠㅠ