transition : 변환속성
움직임을 만들어내는 속성. 어떤 요소의 움직임을 부드럽게 처리하는
역할을 한다. 움직임을 구현할 때 애니메이션 속성과 변환 속성으로 나눠지는데
변환 속성을 이용하면 더 간단하게 모션 효과를 구현할 수 있다.
변환 속성은 적용한다고 해서 바로 변화가 눈에 보이는 것이 아니라
사용자의 행동에 따라 ~초동안 변화시키는 속성이다.
변환 속성으로 변화시킬 수 있는 다양한 속성들
1.위치속성: position - top, left, right, bottom
2.크기속성: width, height
3.박스속성: margin,padding
4.테두리속성: border-width,border-color,border-radius
5.색상속성:color,background-color
6.투명도:opacity
7.변형속성:transform
[종류]
1.transition-duration : 몇 초 동안 움직임을 진행할 것인지 지정하는 속성.
초 단위를 나타낼때는 s단위를 사용한다. 1s = 1초
2.transition-delay : 이벤트 발생 후 몇 초 후에 모션을 재생할지 지정함. 이때 이벤트는
사용자가 행동하는 것들 모든 사용자의 동작들을 포함한다.(클릭이나 마우스오버 등)
3.transition-property : 어떤 속성을 변화시킬지 지정함. 속성값으로는 css속성의 이름을 사용한다.
transition-property를 지정하면 다른 속성은 transition의 영향을 받지않고
지정한 속성만 변화시킬 수 있다.
4.transition-timing-function : 수치 변형 함수. 지정된 속도로 모션효과를 줄 수 있다.
사람의 눈에 익숙한 관성을 보여줌.
-liner : 시작부터 끝까지 동일한 속도로 트렌지션을 진행함.
-ease : 처음에는 천천히 시작해서 점점 빨라지며 마지막에는 천천히 끝냄.
-ease-in : 맨 처음 시작을 느리게 함.
-ease-out : 마지막을 천천히 끝냄.
-ease-in-out : 느리게 시작해서 느리게 끝남.
