[CSS] one-way UI애니메이션 만드는 법

 

 

UI에 애니메이션 추가할때

가능하면 css로 처리하는게 좋음 (성능때문)

 

one-way 애니메이션 : A상태 -> B상태로 변하는 것

✔만드는법

1. 시작스타일

2. 최종스타일(시작, 최종 둘다 class로 css에 만들어 놔야함)

3. 내가 원할때 최종스타일로 변하게 코드 짜기 ex)버튼누르면 최종스타일로 변하게

4. 시작스타일에 transition : all 1s; 추가 (최종스타일로 변할때 효과)

 

애니메이션 할때

visibility : hidden; (display : none; 과 비슷)

visibility : visible; (display : block; 과 비슷)