[ CSS ] transition 이해

transition 속성과 사용법

• 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용
• 전환이 일어날 요소들을 작성해주는 것!

 

📝 transition 속성

• transition-property : 효과를 적용하고자 하는 css 프로퍼티를 지정. 즉, 과정을 보고 싶은 속성을 지정
  • 기본값 : all
  • 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.
    • transition-property: width height;
  • 전환 수치를 다르게 하려면?
    • transition: width 1s, height 2s
• transition-duration : 효과가 나타나는데 걸리는 시간
  • 기본값 : 0s
• transition-timing-function : 트랜지션 효과의 속도
  • 기본값 : ease, 느리게 시작하여 점점 빨라졌다 느려지면서 종료
  • linear : 시작부터 종료까지 일정하게
  • ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히
  • ease-out : 빠르게 시작해서 점점 느려짐
  • ease-in-out : 느리게 시작하여 빨라지다가 느려지면서 종료
  • 어떤 효과를 선택하든 duration 시간에 영향을 끼치지 않는다.
• transition-delay : 특정 조건 하에서 효과 발동
  • 기본값 : 0s
  • 초 단위(s) 또는 밀리 초 단위(ms)로 지정

	transition: property duration function delay
	transition-property: font-size;
	transition-duration: 4s;
	transition-timing-function: ease-out;
	transition-delay: 3s;

• transition의 속성 값들을 한 줄로 작성할 때, 나머지 속성 값의 순서는 상관없지만 항상 duration이 먼저, delay가 나중에 작성되어야 한다.

 

📝 :hover

• 사용자의 마우스 커서가 링크 위에 올라가 있는 상태

 

CSS의 `transition` 속성은 요소의 상태 변화에 부드러운 애니메이션 효과를 부여하는 데 사용됩니다. 이를 통해 속성 값이 변할 때 일정 기간 동안 변화하는 것을 지정할 수 있습니다. `transition` 속성은 다음과 같은 구문을 가지고 있습니다:

```css
transition: property duration timing-function delay;
```

- `property`: 애니메이션 효과를 적용할 속성을 지정합니다. 여러 속성을 적용할 경우 공백으로 구분하여 나열할 수 있습니다. 예를 들어, `width`나 `background-color` 등이 될 수 있습니다.

- `duration`: 애니메이션이 진행될 총 시간을 지정합니다. 초(s)나 밀리초(ms) 단위로 표시할 수 있습니다.

- `timing-function`: 애니메이션의 진행 속도를 지정합니다. 일반적으로 `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out` 등이 사용됩니다.

- `delay`: 애니메이션 시작 전에 대기할 시간을 지정합니다. 초(s)나 밀리초(ms) 단위로 표시할 수 있습니다.

예를 들어, 다음은 너비(`width`) 속성에 대한 1초 동안의 트랜지션을 정의하는 예제입니다:

```css
.element {
  width: 100px;
  transition: width 1s ease;
}

.element:hover {
  width: 200px;
}
```

위 코드에서는 요소(`.element`)의 너비가 변할 때 1초 동안 `ease` 타이밍 함수를 사용하여 부드러운 트랜지션 효과를 제공합니다. 특정 이벤트(예: `:hover`)가 발생하면 너비가 변경됩니다.

 

 

개인공부 기록용입니다:)

참고 : https://lakelouise.tistory.com/128