css display on 모바일 웹

문제 상황

pc 웹에서는 animation이 잘 적용이 되는데, 모바일 웹으로 테스트를 해보니까, 가상 컴포넌트 ::before이 애니메이션이 적용이 안되는 것이다. 왜그럴까, 모바일에서는 before에 애니메이션 적용이 안되는 것일까 하는 생각이 들었지만 유심히 관찰 결과 하나가 작동이 안되는 것을 발견했다.

문제 이유

100%파트에 display: none;을 적어넣었는데, 이 부분이 적용이 안된 것이다. 아마 display는 애니메이션쪽을 적용이 안되는 것일까.. 아니면 초기 스타일링에 display: initial;같은 걸 추가해야 하는 것일까..
애니메이션으로는 forwards를 줘도 display는 동작을 안 하는 것 같다.

문제 해결

결국 99% 부분을 추가해서 opacity: 0;을 넣고, 100%에 opacity: 0;을 넣는 방식으로 해결했다.