CSS Animation Generator
프리셋 애니메이션을 선택하고 옵션을 조정하여 CSS animation 코드를 즉시 생성합니다.
Fade In
투명도 0 → 1로 서서히 나타납니다. 가장 많이 쓰이는 기본 등장 효과입니다.
Fade Out
투명도 1 → 0으로 서서히 사라집니다. 요소가 퇴장할 때 사용합니다.
Slide In Left
왼쪽에서 오른쪽으로 밀려 들어오며 나타납니다. 사이드바·모달 등장 시 적합합니다.
Slide In Right
오른쪽에서 왼쪽으로 밀려 들어오며 나타납니다. 알림·토스트 메시지에 잘 어울립니다.
Slide In Up
아래에서 위로 올라오며 나타납니다. 카드·팝업이 자연스럽게 등장하는 효과입니다.
Slide In Down
위에서 아래로 내려오며 나타납니다. 드롭다운 메뉴·헤더 배너에 적합합니다.
Bounce In
작게 시작해 튕기듯 커지며 나타납니다. 버튼·아이콘 강조 시 생동감을 줍니다.
Rotate In
180° 회전하며 확대되어 나타납니다. 아이콘 전환·로딩 완료 표시에 효과적입니다.
Pulse
크기가 살짝 커졌다 원래대로 반복됩니다. 알림 뱃지·온라인 상태 표시에 활용합니다.
Shake
좌우로 빠르게 흔들립니다. 로그인 실패·입력 오류 시 즉각적인 피드백으로 씁니다.
Zoom In
크기 0에서 1로 확대되며 나타납니다. 모달·이미지 라이트박스 등장에 어울립니다.
Zoom Out
크기 1에서 0으로 축소되며 사라집니다. 모달·팝업을 닫을 때 자연스럽게 쓰입니다.
Fade In
투명도 0 → 1로 서서히 나타납니다. 가장 많이 쓰이는 기본 등장 효과입니다.
600ms
0ms
@keyframes tk-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: tk-fadeIn 600ms ease 0ms 1 forwards;
}animation:
tk-fadeIn 600ms ease 0ms 1 forwards