애니메이션 사용방법
- 페이지에서 메뉴를 클릭하고 옵션을 설정하여 원하는 애니메이션을 직접 만들어 확인할 수 있습니다.
- 옵션 초기화를 클릭하면 옵션에 입력된 값들이 초기 상태로 돌아갑니다.
- CSS 코드 버튼을 클릭하면 애니메이션 코드를 확인할 수 있으며, 복사 버튼을 클릭하여 편리하게 code를 사용할 수 있습니다.
- 다시 재생 버튼을 클릭하면 애니메이션을 다시 재생할 수 있습니다.
- 본 페이지에서 사용하는 시간 단위는 s(초) 단위로 ms(밀리초) 단위는 사용하지 않습니다.
| linear | 등속 |
|---|---|
| ease | 천천히-빠르게-천천히 |
| easein | 천천히-보통 |
| easeout | 보통-천천히 |
| easeinout | 천천히-보통-천천히 |
| both | 애니메이션 종료 후 forwards와 backwards 모두 적용 |
| none | 애니메이션 종료 후 아무 속성도 지정하지 않음 |
| forwards | 애니메이션 종료 후 마지막 키프레임 유지 |
| backwards | 애니메이션 종료 후 시작 전 처음 키프레임 유지 |