CSS 애니메이션 생성기
애니메이션 이름, 재생 시간, 가속도 함수, 진행 방향, 채우기 모드를 설정하여 페이드인 효과의 CSS 키프레임과 애니메이션 코드를 생성합니다.
도구 실행
CSS 애니메이션 생성기는 웹 요소에 적용할 키프레임 규칙과 애니메이션 속성 스타일을 손쉽게 만들어 주는 온라인 도구입니다. 애니메이션 이름, 재생 시간, 가속도 함수, 진행 방향, 채우기 모드 등 5가지 주요 설정 항목을 지정할 수 있습니다. 이름을 입력하지 않으면 기본값이 사용되며, 재생 시간은 초 단위 숫자로 코드에 적용됩니다. 생성되는 키프레임은 0% 구간에서 투명도 0과 아래로 20픽셀 이동한 상태를 설정하고, 100% 구간에서 투명도 1과 원래 위치로 돌아오도록 구성됩니다. 설정을 마친 후 결과 영역에 표시되는 완성된 CSS 코드를 복사하여 프로젝트 스타일시트에 바로 적용할 수 있습니다.
사용 방법
- 애니메이션 이름, 재생 시간, 가속도 함수, 진행 방향, 채우기 모드 항목에 원하는 값을 입력합니다.
- 값을 입력하지 않은 항목은 기본 설정값이 자동으로 적용됩니다.
- 실행 버튼을 클릭하여 CSS 애니메이션 코드를 생성합니다.
- 결과 영역에 출력된 키프레임 정의와 애니메이션 선언 텍스트를 복사하여 스타일시트에 붙여넣습니다.
예시
- 애니메이션 이름에 'slideUp', 재생 시간 1.5, 가속도 함수 'ease-out', 진행 방향 'normal', 채우기 모드 'forwards'를 입력하여 아래에서 위로 나타나며 위치를 유지하는 CSS 코드 생성
- 이름을 비워두고 재생 시간 2, 가속도 함수 'linear', 진행 방향 'alternate', 채우기 모드 'both'를 설정하여 기본 이름이 적용된 반복용 CSS 코드 생성
자주 묻는 질문
애니메이션 이름을 비워두면 어떻게 처리됩니까?
애니메이션 이름을 비워두면 기본 대체 이름이 자동으로 지정되어 문제없이 온전한 CSS 코드가 생성됩니다.
재생 시간 단위는 어떻게 들어갑니까?
입력한 재생 시간 숫자 뒤에 초 단위(s)가 자동으로 추가되어 animation 속성 코드에 반영됩니다.
어떤 키프레임 효과가 생성됩니까?
0% 구간에서 투명도 0 및 20픽셀 아래 위치, 100% 구간에서 투명도 1 및 원래 위치로 전환되는 페이드인 이동 효과가 생성됩니다.
생성된 코드는 어떻게 사용합니까?
출력된 @keyframes 블록과 animation 속성 코드를 복사하여 웹 프로젝트의 CSS 파일이나 style 태그 안에 붙여넣어 적용합니다.