인프런 커뮤니티 질문&답변
작성한 질문수
CSS animation 3분 45초 부분 질문입니다!
작성
·
137
0
@keyframes ball {
0% {
top: 0;
}
50% {
top: 100px;
}
100% {
top: 300px;
}
}
이렇게 하면 애니메이션 동작이 안 되고, margin-top을 붙여야 동작하던데 왜 안 될까요!
이부분에서 top으로 설정하면 애니메이션 작동이 안 되고, margin-top 으로 하면 동작이 되던데 왜 그런 걸까요!
답변 1
0
잔재미코딩 DaveLee
지식공유자
안녕하세요. 답변도우미입니다.
해당 코드를 그대로 저도 금일 실행을 해봤는데요. 다음과 같이 말씀하신 코드 그대로 동작을 잘 하는 것을 확인하였습니다. (크롬 브라우저로 확인하였습니다) 코드 상으로 또 실제 실행해봤을 때, margin-top 일 때만 동작을 하고, top 일 때는 동작을 안한다는 것은 조금 이상한 상황같은데요. 해당 코드를 직접 작성을 해서 테스트를 해보신 것이라면, 제공해드린 pdf 내의 코드링크를 그대로 클릭해서, 실행되는 보습을 보시면서, index.html 파일의 코드를 확인해보셔도 좋을 것 같습니다.
@keyframes ball {
0% {
/* keyframe */
top: 0;
}
50% {
/* keyframe */
top: 100px;
}
100% {
/* keyframe */
top: 300px;
}
}
감사합니다.
vscode로 코드를 실행했을 때에는 안 되더라구용.. 무엇 때문일까요..?