[css 10.] 부드러운 효과주는 transition 작성법, 주의사항


[css 10.] 부드러운 효과주는 transition 작성법, 주의사항

transition 뜻 트랜지션 특정 태그에 변화가 생길 때, 변화를 부드럽게 적용(과정을 보여줌)시켜 동적으로 보여주는 효과 transition 작성법 transition : property duration timing-function delay; property (필수) : 적용할 속성(대상) ex) all , width, height duration (필수) : 지속시간 ex) 1s, 2s, ... timing-function : 진행속도 ex) ease, ease-in, linear, ... delay : 지연시간 ex) 1s, 2s, ... ** timing-function 쓰는 방법 ease (기본값) 느린 속도 → 점점 빨라짐 → 느린 감속 (ease-in-out 보다 자연스러움) linear 시작부터 종료까지 일정한 속도 ease-in 느린 속도 → 점점 빨라짐 ease-out 빠른 속도 → 느린 감속 ease-in-out 느린 속도 → 점점 빨라짐 → 느린 감속 (e...


#csstransition #css부드러운효과 #css애니메이션효과 #css트랜지션 #css효과 #transitioncss #transition작성법 #transition효과

원문링크 : [css 10.] 부드러운 효과주는 transition 작성법, 주의사항