svg 애니메이션 작동 안 됨 ㅠㅠ
본문
왜 스트로크가 작동 안할까요 ㅠㅠ
.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처리를 하실려면 키프레임을 정확히해주셔야하지않을까요? 클래스요소이름을 넣어주시던가요
그렇게봐서는 현재 프론트 를 보면 요소이름도 다 틀리고 ..확인 또확인해보시기바랍니다. 전체 소스를 오픈해보셔서 해결해보시기바랍니다.