자바스크립트
애니매이션 만드는 법
S_sunny
2022. 10. 8. 04:38
애니매이션은 CSS로 처리하는것이 자바스크립트로 하는것 보다 성능적으로 좋음
one-way 애니매이션
1) 시작시 스타일 설정 (CSS)
- 안보이는상태 -> 보이는상태의 애니매이션을 원한다면
display : none; 대신 visibility : hidden; 으로 설정해야함.
2) 종료시 스타일 설정 (CSS)
display : block; 대신 visibility : visible; 으로 설정해야함.
3) 언제 종료 스타일로 변할지 코드 작성 (JS)
ex) 버튼누르면, 종료스타일 추가( .classList.add( '종료스타일' ) )
4) transition 추가 (CSS)
시작 스타일에 transition 속성 추가
ex) transition : all 1s;