transition
사용자가 태그위에 마우스를 올리거나 클릭했을때 바뀌는 모양을 부드럽게 움직이며
풀어주는 모션효과를 만드는 속성.
아래 속성들과 함께 적용이 가능하다.[transition으로 변화시킬수 있는 속성들]
- 위치속성(position의 좌표들) : left, right, bottom, top
- 크기속성 : width, height
- 박스속성 : padding, margin
- 테두리속성 : border-width, border-color, border-radius
- 색상속성 : color, background-color
- 투명도 : opacity, rgba
- 변형속성 : transform[transition의 하위 속성들]
트랜지션의 모션을 섬세하게 컨트롤할때 아래 속성들을 함께 사용할 수 있다.
1. transition
: transition의 하위 속성들을 한꺼번에 선언할 때 사용한다.
공백으로 구분하여 여러 속성을 한 번에 선언한다.
2. transition-duration
: "~초 동안"이라는 뜻으로, 모션효과를 몇 초동안 적용할지 정한다.
초 단위는 s로 표기한다.
3. transition-delay
: "~초 기다렸다가"라는 뜻으로, 모션효과가 바로 적용되지 않고
선언된 초 동안 기다렸다가 모션을 진행한다.
지연시간을 말하며 초단위인 s를 사용한다.
4. transition-property
: 태그에 적용된 여러 속성중에 일부만 transition효과를 주고싶을때 사용한다.
즉, 어떤 속성을 트랜지션 시킬것인지 정하는 속성이다.
속성값으로는 변형시키고자하는 속성의 이름을 쓴다.
속성끼리는 ,로 구분한다.
5. transition-timing-function
: 정해진 키워드에 따라 모션 속도를 조절한다. 가속도와 같은 의미이다.
쓸 수 있는 속성값은 아래와 같다.
- linear
: 처음부터 끝까지 일정한 속도로 움직인다.
- ease
: 가속도. 처음에는 천천히 시작했다가 점점 빨라지면서 마지막에는 천천히 끝내는 값.
기본값이다.
- ease-in
: 천천히 시작한다.
- ease-out
: 천천히 끝난다.
- ease-in-out
: 천천히 시작했다가 천천히 끝낸다.마우스 호버 했을 경우
Hi