인프런 커뮤니티 질문&답변
작성한 질문수
animation forwards 관련 질문
작성
·
413
·
수정됨
0
안녕하세요, "CSS Flex와 Grid 제대로 익히기" 강의 및 "인터렉티브 웹개발 제대로 시작하기"
강의를 듣고 예제를 응용 중 다음과 같은 질문사항이 생겼습니다.
"3D 보드게임판" 예제에 보면 초기에 "starting" 애니메이션 지정을 통해 카메라 앵글을
돌려주는데 forwards 속성을 사용하여 마지막 프레임에서 멈추게 하는 것은 이해를 하였습니다.
여기에 더 나아가 "전진! 3D 스크롤" 예제에 나오는 방향키 액션으로 앵글을 돌리는 액션을
추가해보고 싶어 코드를 수정하였는데요.
질문은 위 starting 애니메이션 지정을 빼면 방향키 이벤트 키로 앵글을 서서히 누른만큼
돌아가게 만들기는 했는데, starting 애니메이션 지정만 넣으면 방향키 이벤트가 먹통이
되는 것을 확인하였습니다. 이리저리 알아본 바로는 애니메이션의 forwards 속성에 의해
이후 rotate() 가 적용이 안되는 것처럼 보이는데, "animationFillMode" 속성을 통해 "none" 이나
"backwards" 를 주면 방향키 이벤트가 정상작동 하지만, starting 으로 이미 돌아간 앵글에서
첫 프레임으로 "짠" 하고 되돌아가고 방향키 이벤트가 먹는 것처럼 되어 자연스럽지가 않아
보이는데 이를 해결하는 방법이 있을까요?
답변 2
0
말씀하시는 걸 제가 제대로 이해한건지는 모르겠는데.. rotate와 translate 모두 transform의 속성으로 들어가는데, rotate만 적용되고 translate가 적용되지않았거나, translate만 적용되고 rotate는 적용되지 않아서 생기는 문제일 수 있을 것 같습니다. 해당 시점에 필요한 transform의 속성을 모두 넣어보시겠어요?
그리고 얼마전에 CSS 애니메이션에 관해 쭉 정리하는 포스트를 하나 작성했는데, 이것도 도움이 될지 모르겠습니다 :)
https://studiomeal.com/archives/1465
0
안녕하세요, 인프런 AI 인턴이에요. “전진! 3D 스크롤” 예제에서 방향키 이벤트 키로 앵글을 돌리는 액션을 추가하려 하면서 “starting” 애니메이션에서 이벤트 키가 먹통이 된다는 문제가 발생하는 것 같습니다.
애니메이션의 forwards 속성이 이 문제의 원인 중 하나일 수 있습니다. forwards 속성이 적용되면 애니메이션이 종료된 후에도 마지막 상태가 유지되기 때문에, 이벤트 키가 작동하지 않을 수 있습니다.
“animationFillMode” 속성을 이용하면 애니메이션이 종료된 후의 모습을 결정할 수 있습니다. “none” 값은 애니메이션이 종료되면 초기 상태로 되돌아가고, “backwards” 값은 애니메이션의 시작 프레임을 유지합니다. 그러나 “backwards” 값이 이전에 “starting” 애니메이션에 적용되지 않았어서, 초기에 ‘짠’ 하고 되돌아가는 현상이 발생한 것 같습니다.
이를 해결하려면, “backwards” 값이 적용된 애니메이션을 추가로 만들어서 0초부터 시작하도록 하고, “starting” 애니메이션에서는 forwards 속성 대신에 “animationFillMode: none”을 적용하면 될 것 같습니다. 이 방법으로 방향키 이벤트도 정상 작동하고, 초기 애니메이션의 자연스러운 동작도 유지할 수 있을 것입니다.
제가 설명드린 내용이 도움이 되었기를 바라며, 추가적인 질문이 있으시면 언제든지 물어봐주세요. 감사합니다.