svg 애니메이션 작동 안 됨 ㅠㅠ

svg 애니메이션 작동 안 됨 ㅠㅠ

QA

svg 애니메이션 작동 안 됨 ㅠㅠ

본문

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

3673009239_1727751368.1747.png

 

.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입니다 ㅠㅠ 

이 질문에 댓글 쓰기 :

답변 1

.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;
  }
}

키프레임 문제 잇어보이는데요? 요소아이디가 videoProgress 면 이이아디로인해서 스크립트를 처리 햇다라는것인가요? 아니면 css처리를 하실려면 키프레임을 정확히해주셔야하지않을까요? 클래스요소이름을 넣어주시던가요

그렇게봐서는 현재 프론트 를 보면 요소이름도 다 틀리고 ..확인 또확인해보시기바랍니다. 전체 소스를 오픈해보셔서 해결해보시기바랍니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 126,117 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT