움직이는 애니메이션 시간을 길게 했더니 뚝뚝 끊기면서 움직입니다.

조회수 2429회

이미지가 담긴 박스 하나를 위 아래로 각각 150픽셀 정도씩 총 80초동안 움직이는걸 반복시키는대 부드럽게 움직이지 않고 계속 끊기면서 움직이는대 어떻게 못하나요?

.imgBox img{

    position:absolute;
    top:0px;
    -webkit-animation: listImg 80s linear infinite;
                    animation: listImg 80s linear infinite;
}

@-webkit-keyframes listImg{

    50%{top:-150px;}
    100%{top:0px;}
}

@keyframes listImg{

    50%{top:-150px;}
    100%{top:0px;}
}

코드입니다.

  • 코드의 문제 같은데요. 코드를 보여주세요. 일반적인 상황에서는 그 정도로 브라우저가 힘들어하지 않아요. doodoji 2019.4.16 19:53
  • 질문에 코드를 넣었습니다. 알 수 없는 사용자 2019.4.16 19:54
  • 아... 80초 동안 움직이면 총 300px을 움직이는건데 그럼 0.27초당 1px 움직이니까 눈에 보이는 정도로 끊기는게 당연하겠네요. 픽셀단위로만 계산되어 움직이니까요. doodoji 2019.4.16 20:50
  • 아.. 그럼 어떻게 못하겠군요.. 네 감사합니다 알 수 없는 사용자 2019.4.17 09:51
  • 음.. 굳이 저방식 아니더라도 jquery로 0.1초에 1px씩 가라를 수십번 계속 명령하는 그런 방식 뺴고 다른 방식 없을까요? 알 수 없는 사용자 2019.4.17 14:36
  • 사실 CSS든 JS든 어느 방향을 택하더라도 브라우저에서 렌더링 되는 한, DOM 컴포넌트의 애니메이션은 1px 단위로 discrete하게 애니메이션이 진행될겁니다. 만약 끊기지 않는 애니메이션을 보려면 SVG, HTML Canvas, WebGL과 같은 별도의 그래픽 컨텍스트를 사용하는게 맞고요. 제 개인적으로는 저렇게 느린 애니메이션이 의미가 있는가... 먼저 그 효과에 대해서 의문을 가질것 같습니다. doodoji 2019.4.17 15:10
  • 하하.. 저도 시켜서 알아보고 있는 중이라... 네 알겠습니다 감사합니다. 알 수 없는 사용자 2019.4.17 16:08
  • 위에 제 댓글에서 말씀드린 방법들이 틀린건 아닌데 제가 하나 간과한게 있었네요. 답변으로 달겠습니다. doodoji 2019.4.17 19:22

1 답변

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)