CSS 애니메이션 생성기
동작 템플릿이나 키프레임을 조정하고 재생해 확인합니다. 웹 페이지에서 사용할 CSS와 HTML 사용 예를 얻을 수 있습니다.
할 수 있는 일
서식에서 동작 조정
등장, 퇴장, 회전 등 12가지 중에서 고를 수 있습니다. 재생 시간과 반복을 용도에 맞게 바꿀 수 있습니다.
중간 상태도 편집
키프레임마다 이동량, 회전, 확대율, 불투명도를 지정하고 생성한 동작을 확인할 수 있습니다.
CSS와 HTML 받기
애니메이션 CSS와 같은 클래스를 붙인 HTML 사용 예시를 복사하거나 저장할 수 있습니다.
사용 방법
서식 선택
만들고 싶은 동작을 고르고 1회 재생 시간을 정합니다. 서식을 다시 고르면 조정한 설정도 대체됩니다.
필요한 부분만 조정
재생 세부 정보나 키프레임을 열어 중간 동작, 방향, 반복 등을 변경합니다.
생성하고 재생하기
“CSS 생성 및 미리보기”로 확인합니다. 설정을 바꾸면 다시 생성하세요.
CSS와 HTML 받기
CSS를 적용하고 HTML 요소에 toollet-motion 클래스를 붙입니다. HTML 사용 예시는 CSS와 함께 사용합니다.
이럴 때 유용합니다
요소가 나타나는 동작 만들기
페이드 인이나 아래에서 등장하는 서식으로 나타나는 동작과 속도를 조정합니다.
버튼에 닿았을 때의 동작
시작 조건을 호버 · 키보드 포커스 시로 바꿔 조작에 반응하는 동작을 만들 수 있습니다.
키프레임과 재생 조건의 개념
중간 상태와 재생 시간
키프레임의 %는 1회 재생 중의 위치입니다. 1초라면 50%는 0.5초 지점입니다. 값 사이를 어떻게 변화시킬지는 속도 변화로 정해집니다.
이동 · 회전 · 보이는 방식
가로/세로 위치는 원래 위치에서의 이동량입니다. 확대율 1이 원래 크기, 불투명도 0은 투명, 1은 불투명입니다.
지연 · 반복 · 방향
지연 시간은 시작 전에 한 번만 더해집니다. 유한 재생의 총 시간은 지연 시간 + 1회 재생 시간 × 횟수입니다. 교차는 왕복 방향을 전환합니다.
재생 전후 상태
지연 시간이나 종료 후에 어떤 상태를 표시할지 선택합니다. 역방향 · 교차 설정에 따라 재생의 처음과 마지막에 사용하는 시점이 달라집니다.
동작 줄이기 설정
생성한 CSS는 기기의 동작 줄이기 설정에 대응합니다. 해당 애니메이션을 멈추고 설정한 방향과 횟수에 따른 끝점 상태를 사용합니다. 무한 재생에서는 첫 1회의 끝점을 사용합니다.
자주 묻는 질문
한 번만 재생할 수 있나요?
“계속 반복”을 끄고 반복 횟수를 1로 설정하세요. 일반 서식은 1회 재생으로, 회전과 부유는 계속 반복이 켜진 상태로 시작합니다.
어떤 요소에 CSS를 적용하나요?
HTML 요소에 toollet-motion 클래스를 붙이고 생성한 CSS와 함께 사용합니다. HTML 사용 예시는 버튼 요소의 일부이며, 단독으로 완성된 웹 페이지가 아닙니다.
키프레임은 몇 개까지 만들 수 있나요?
시작점 0%와 끝점 100%를 포함해 2~8개입니다. 추가하면 가장 넓은 구간의 중간에 들어갑니다. 시작점과 끝점은 삭제할 수 없고 %만 고정입니다.
설정을 바꾸니 미리보기가 사라졌습니다.
이전 설정의 동작이나 코드를 실수로 가져가지 않도록 설정을 바꿀 때 결과를 지웁니다. 다시 생성하면 현재 설정을 확인할 수 있습니다.
미리보기가 움직이지 않는 이유는 무엇인가요?
기기에서 동작 줄이기가 켜져 있으면 동작을 멈춥니다. 호버 · 포커스 시 설정은 시작 조건도 확인하세요. 다른 탭으로 전환하면 미리보기가 일시정지됩니다.
여러 애니메이션을 같은 페이지에서 사용할 수 있나요?
생성되는 클래스 이름과 키프레임 이름은 공통입니다. 별개의 동작으로 사용할 때는 두 이름을 각각 바꾸고 해당 HTML에도 반영하세요.
입력과 결과
- 설정
- 12가지 서식, 2~8개의 키프레임, 재생 시간 0.2~60초.
- 재생
- 지연 0~60초, 1~100회 또는 무한, 속도 변화 · 방향 · 재생 전후 상태 · 시작 조건.
- 출력
- CSS와 HTML 사용 예시. 동작만 정의하며 웹 페이지 전체나 동영상 파일을 만들지는 않습니다.