CSS 애니메이션 생성기이란?
CSS 키프레임 애니메이션을 시각적으로 만들 수 있습니다. 코드를 직접 쓸 필요가 없습니다. 키프레임을 설정하고, 타이밍 함수를 고르고, 지속 시간과 지연을 조정한 뒤 CSS 코드를 프로젝트에 바로 복사하세요. 버튼, 로딩 효과, 호버 효과, 페이지 전환에 잘 맞습니다.
페이드, 슬라이드, 줌, 회전, 바운스, 주목, 퇴장, 로더 등으로 분류된 40개가 넘는 완성형 애니메이션에서 고르거나 처음부터 직접 만들 수 있어요. 각 키프레임에서 불투명도, 스케일, 회전, translate X·Y, skew X·Y, 흐림, 모서리 둥글기, 박스 그림자, 배경색까지 세밀하게 설정할 수 있습니다. 이미 @keyframes 블록이 있다면 가져오기 대화상자에 붙여넣어 보세요. 비주얼 에디터가 모든 단계를 그대로 복원합니다. 미리보기를 멈추고 빨간 스크러버를 드래그하면 중간 프레임도 자유롭게 살펴볼 수 있고, 결과물은 순수 @keyframes CSS라서 어떤 스타일시트에도 그대로 붙여 쓰면 됩니다.
사용 방법
- 애니메이션 프리셋(페이드, 슬라이드, 바운스, 회전)을 선택하거나 타임라인에 키프레임을 추가하여 처음부터 만드세요.
- 각 키프레임의 속성(변환, 불투명도, 색상, 크기)을 조정하고, 이징 곡선, 지속 시간, 반복 횟수를 세밀하게 설정하세요.
- 실시간으로 애니메이션을 미리 본 다음, 생성된 CSS @keyframes 코드를 복사하거나 .css 파일로 다운로드하세요.
사용 시기
- 히어로 섹션, 모달, 카드 등에 페이지 로드 시 입장 애니메이션을 더할 때.
- 버튼의 마이크로 인터랙션 설계, 예를 들어 호버 시 살짝 커지거나 폼 오류 시 흔들리는 효과.
- 로딩 스피너나 스켈레톤 상태를 프레임워크에 연결하기 전에 미리 프로토타입할 때.
결과
프론트엔드 개발자가 포트폴리오 페이지의 카드에 부드러운 등장 애니메이션이 필요합니다. 아래에서 20px 위치에서 페이드인되는 0.6초 ease-out 애니메이션을 설정하고, CSS를 복사하여 카드마다 시차를 두어 적용합니다.
자주 묻는 질문
- CSS animation과 transition의 차이는?
- transition은 hover, focus, 클래스 변경 같은 트리거로 상태 A에서 B로 한 번 이동합니다. animation은 @keyframes 규칙을 따라 원하는 만큼의 중간 단계를 만들고, 반복도 가능하며, 사용자 조작 없이도 페이지 로드와 함께 시작합니다.
- 애니메이션이 한 번 실행되고 사라지는 이유는?
- 애니메이션이 끝나면 요소는 원래 스타일로 돌아갑니다. animation-fill-mode를 forwards로 두면 마지막 키프레임 값이 유지되고, both로 두면 지연 구간 동안에도 첫 키프레임이 적용됩니다.
- 자연스러운 느낌의 이징은 어떤 걸 골라야 하나요?
- 입장에는 ease-out이 어울려요. 끝부분에서 감속하면서 움직임이 자리잡는 느낌이 듭니다. 퇴장에는 반대로 ease-in. cubic-bezier(0.34, 1.56, 0.64, 1)는 살짝 튕기는 느낌을 주는데 과하지 않고 장난기 정도로 보입니다.
- 구형 브라우저에서도 이 애니메이션이 동작할까요?
- @keyframes는 2013년 이후 출시된 모든 브라우저에서 벤더 프리픽스 없이 지원됩니다. IE 10 이하까지 챙기려면 -webkit- 프리픽스가 필요하지만, 그 사용자층은 이제 매우 작아서 별도 CSS를 더 쓰는 의미가 크지 않습니다.
- 애니메이션을 영원히 반복하려면?
- iteration-count를 infinite로 두고 direction: alternate와 함께 쓰세요. 사이클마다 반대 방향으로 재생되면서 부드럽게 왕복하니, pulse나 shake 효과처럼 시작점으로 갑자기 튕겨가는 느낌 없이 자연스럽게 이어집니다.