> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/transform-transition-animation/transitions.md).

# 트랜지션

## 트랜지션 (Transitions) (IE10+)

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.  

{% hint style="warning" %}
트랜지션 속성은[ IE10 이상 지원](https://caniuse.com/?search=transition)한다. 
{% endhint %}

## transition-property 트랜지션 속성

all(기본값), none

## transition-duration 트랜지션 시간

변화가 일어나는 기간(1.2s, 4s), 초단위, (기본값 0s)

## transition-timing-function 트랜지션 타이밍 함수

트렌지션 효과가 진행하는 동안 속도의 변화를 지정한다. 

* ease : 기본값, 천천히 시작해서, 빠르게 진행하며, 천천히 끝남.
  * cubic-bezier(0.25,0.1,0.25,1)
* linear : 처음과 끝이 같은 속도로 나타남
  * cubic-bezier(0,0,1,1)
* ease-in : 천천히 시작
  * cubic-bezier(0.42,0,1,1)
* ease-out : 천천히 끝남
  * cubic-bezier(0,0,0.58,1)
* ease-in-out : 천천히 시작해서 천천히 끝남
  * cubic-bezier(0.42,0,0.58,1)
* cubic-bezier(n,n,n,n) : 직접 값을 지정할 수 있음. 가능한 값은 0부터 1까지 숫자값

```css
/* 임의 값 */
transition-timing-function: cubic-bezier(0.085, 1.35, 0.93, -0.565);

/* CSS 기본 설정 가능한 값 */
transition-timing-function: linear;
```

## transition-delay 트랜지션 지연시간

* 트랜지션 효과가 시작되기 전 기다리는 시간

## transition 트랜지션 속기형

transition: `<prop>` `<dur>` `<timfn>` `<delay>`

```css
.headline {
  transition: top 0.4s ease, transform 0.6s ease-in-out 0.4s;

  /* 또는 */
  transition: all 0.4s ease-out 0.32s;
}
```

## 예시&#x20;

```css
.headline {
  /* 초기 상태(initial state) */
  position: absolute;
  top: 100px;
  left: 40%;
  margin-left: -156px;
  transition-property: top, transform; /*또는 all*/
  transition-duration: 0.45s 0.8s;
  transition-timing-function: linear;
  transition-delay: 0.4s, 0.4s;
}

.headline:hover {
  /* 종료 상태 (final state) */
  top: 100px;
  transform: rotate(10deg);
}
```

## 참고

* [CSS 트랜지션 사용하기](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) &#x20;
* [codepen 트랜지션 실습 ](https://codepen.io/hanna244/pen/mdroKqz)
* [트랜지션 문법](https://developer.mozilla.org/ko/docs/Web/CSS/transition)
* [easings.net](http://easings.net/ko)
* [Ceaser - CSS EASING ANIMATION TOOL](https://matthewlein.com/tools/ceaser)
* [CSS Transition (실습 완료) by codepen](https://codepen.io/yamoo9/full/qoOGdg)