애니메이션 소개
스크롤(sref) · 클릭(clef) · 호버(hoef) · 포커스(foef) · 더블클릭(dcef) 트리거 예시
사용법
[sref|clef|hoef|foef|dcef]_[css|js]_애니메이션이름_duration_delay_threshold_rootMargin
트리거: sref(스크롤) · clef(클릭) · hoef(호버) · foef(포커스) · dcef(더블클릭)
옵션: duration(ms) · delay(ms) · threshold(0~100) · rootMargin(px/%) - 4개 모두 필수
트리거별 애니메이션 데모
[sref|clef|hoef|foef|dcef] + [css|js] 형식의 클래스로 동작합니다
클릭 페이드인 (JS) - zoom으로 재현
clef_js_zoom-100-100-0-100_800_0_10_0px
클릭 토글
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
호버 페이드인 (CSS) - zoom으로 재현
hoef_css_zoom-100-100-0-100_600_0_10_0px
호버 시 on / 마우스아웃 시 off
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
포커스 페이드인 (JS) - zoom으로 재현
foef_js_zoom-100-100-0-100_700_0_10_0px
포커스/블러 토글
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 700ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 700ms, delay 0ms, threshold 10%, rootMargin 0px
더블클릭 페이드인 (CSS) - zoom으로 재현
dcef_css_zoom-100-100-0-100_900_0_10_0px
더블클릭 토글
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
스크롤 페이드인 (CSS) - zoom으로 재현
sref_css_zoom-100-100-0-100_1000_200_10_0px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 1000ms, delay 200ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 200ms, threshold 10%, rootMargin 0px
스크롤 페이드인 (빠름) - zoom으로 재현
sref_css_zoom-100-100-0-100_500_0_30_0px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 500ms, delay 0ms, threshold 30%, rootMargin 0px
duration 500ms, delay 0ms, threshold 30%, rootMargin 0px
스크롤 페이드인 (느림) - zoom으로 재현
sref_css_zoom-100-100-0-100_2000_500_20_50px
scale-from=100%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 2000ms, delay 500ms, threshold 20%, rootMargin 50px
duration 2000ms, delay 500ms, threshold 20%, rootMargin 50px
클릭 페이드아웃 (CSS) - zoom으로 재현
clef_css_zoom-100-100-100-0_800_0_10_0px
클릭 토글
scale-from=100%, scale-to=100%, opacity-from=100%, opacity-to=0%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=100%, scale-to=100%, opacity-from=100%, opacity-to=0%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
1. 기본 효과
슬라이드, 확대/축소, 회전, 흐림 등 기본적인 등장 효과
아래→위 슬라이드 (클릭)
클릭 시 토글
distance x=0px, y=50px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
distance x=0px, y=50px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
위→아래 슬라이드 (클릭)
클릭 시 토글
distance x=0px, y=-100px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
distance x=0px, y=-100px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
오른쪽→왼쪽 슬라이드 (클릭)
클릭 시 토글
distance x=60px, y=0px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
distance x=60px, y=0px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
왼쪽→오른쪽 슬라이드 (클릭)
클릭 시 토글
distance x=-120px, y=0px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
distance x=-120px, y=0px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
중앙 확대 (클릭)
clef_css_zoom-35-100-0-100_800_0_10_0px
클릭 시 토글
scale-from=35%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=35%, scale-to=100%, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
중앙 축소 (클릭)
clef_css_zoom-150-100-100-0_800_0_10_0px
클릭 시 토글
scale-from=150%, scale-to=100%, opacity-from=100%, opacity-to=0%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=150%, scale-to=100%, opacity-from=100%, opacity-to=0%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
타이핑 (클릭)
텍스트가 한 글자씩 표시됩니다.
클릭 시 토글
duration 2000ms (전체 타이핑 시간), delay 0ms
threshold 10%, rootMargin 0px
duration 2000ms (전체 타이핑 시간), delay 0ms
threshold 10%, rootMargin 0px
깜빡임 (CSS)
clef_css_blink_800_0_10_0px
클릭 시 토글
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
깜빡임 (JS)
clef_js_blink_800_0_10_0px
클릭 시 토글
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
둥둥 떠다니기 (CSS)
clef_css_float_2000_0_10_0px
클릭 시 토글
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
둥둥 떠다니기 (JS)
clef_js_float_2000_0_10_0px
클릭 시 토글
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
회전 (CSS)
clef_css_spin_2000_0_10_0px
클릭 시 토글
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
회전 (JS)
spin text auto-circle
클릭 시 토글
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
2. 특수 효과
카드 뒤집기, 빛나는 효과, 경첩 효과 등 특수한 애니메이션
카드 뒤집기 (CSS)
clef_css_flip_800_0_10_0px
클릭 시 토글
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
카드 뒤집기 (JS)
clef_js_flip_800_0_10_0px
클릭 시 토글
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
4. 애니메이션 효과
튀어오르기, 고무, 축하, 흔들거림, 젤리 등 다양한 움직임 효과
튀어오르기 (CSS)
clef_css_bounce_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
튀어오르기 (JS)
clef_js_bounce_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
고무 효과 (CSS)
clef_css_rubber_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
고무 효과 (JS)
clef_js_rubber_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
축하 효과 (CSS)
clef_css_tada_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
축하 효과 (JS)
clef_js_tada_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
흔들거림 (CSS)
clef_css_wobble_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
흔들거림 (JS)
clef_js_wobble_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
젤리 효과 (CSS)
clef_css_jello_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
젤리 효과 (JS)
clef_js_jello_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
빛나는 효과 (CSS)
clef_css_glow_1000_0_10_0px
클릭 시 토글 (무한 반복)
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
빛나는 효과 (JS)
clef_js_glow_1000_0_10_0px
클릭 시 토글 (무한 반복)
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
회전하며 나타남 (CSS)
clef_css_rotate--200-0-0-100_1000_0_10_0px
클릭 시 토글
rotate-from=-200deg, rotate-to=0deg, opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
rotate-from=-200deg, rotate-to=0deg, opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
회전하며 나타남 (JS)
clef_js_rotate--200-0-0-100_1000_0_10_0px
클릭 시 토글
rotate-from=-200deg, rotate-to=0deg, opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
rotate-from=-200deg, rotate-to=0deg, opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
회전하며 사라짐 (CSS)
clef_css_rotate-0-200-100-0_1000_0_10_0px
클릭 시 토글
rotate-from=0deg, rotate-to=200deg, opacity-from=100%, opacity-to=0%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
rotate-from=0deg, rotate-to=200deg, opacity-from=100%, opacity-to=0%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
회전하며 사라짐 (JS)
clef_js_rotate-0-200-100-0_1000_0_10_0px
클릭 시 토글
rotate-from=0deg, rotate-to=200deg, opacity-from=100%, opacity-to=0%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
rotate-from=0deg, rotate-to=200deg, opacity-from=100%, opacity-to=0%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
경첩처럼 떨어짐 (CSS)
clef_css_hinge_2000_0_10_0px
클릭 시 토글
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
경첩처럼 떨어짐 (JS)
clef_js_hinge_2000_0_10_0px
클릭 시 토글
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
기울이기 (CSS)
clef_css_skew-20-10-0-100_800_0_10_0px
클릭 시 토글
skew-x=20deg, skew-y=10deg, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
skew-x=20deg, skew-y=10deg, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
확대/축소 (CSS)
clef_css_scale-30-50-0-100_800_0_10_0px
클릭 시 토글
scale-x=30%, scale-y=50%, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
scale-x=30%, scale-y=50%, opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
슬라이드+줌 (CSS)
클릭 시 토글
distance: x=50px, y=50px
scale-from=50%, scale-to=100%
opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=50px
scale-from=50%, scale-to=100%
opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
슬라이드+줌 (JS)
클릭 시 토글
distance: x=50px, y=50px
scale-from=50%, scale-to=100%
opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=50px
scale-from=50%, scale-to=100%
opacity-from=0%, opacity-to=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
탄성 확대 (CSS)
clef_css_elasticZoom-70-110-0-100_900_0_10_0px
클릭 시 토글
scale-from=70%, scale-to=110%
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=70%, scale-to=110%
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
탄성 슬라이드 (CSS)
clef_css_elasticSlide-0-80_900_0_10_0px
클릭 시 토글
distance: x=0px, y=80px
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=0px, y=80px
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
심장 박동 (CSS)
clef_css_heartbeat_1300_0_10_0px
클릭 시 토글
무한 반복
duration 1300ms, delay 0ms, threshold 10%, rootMargin 0px
무한 반복
duration 1300ms, delay 0ms, threshold 10%, rootMargin 0px
떨어지듯 등장 (CSS)
clef_css_dropIn_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
플립+슬라이드 (CSS)
clef_css_flipSlide-50-0--180-0_1200_0_10_0px
클릭 시 토글
distance: x=50px, y=0px
rotate-from=-180deg, rotate-to=0deg
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=0px
rotate-from=-180deg, rotate-to=0deg
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
플립+줌 (CSS)
clef_css_flipZoom-50-100--180-0_1200_0_10_0px
클릭 시 토글
scale-from=50%, scale-to=100%
rotate-from=-180deg, rotate-to=0deg
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=50%, scale-to=100%
rotate-from=-180deg, rotate-to=0deg
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
텍스트 파도 (JS)
안녕하세요
클릭 시 토글
글자별 파도 효과
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
글자별 파도 효과
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
순차 등장 (JS)
항목 1
항목 2
항목 3
클릭 시 토글
interval=100ms
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
interval=100ms
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
스와이프 왼쪽 (CSS)
clef_css_swipeLeft_900_0_10_0px
클릭 시 토글
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
스와이프 오른쪽 (CSS)
clef_css_swipeRight_900_0_10_0px
클릭 시 토글
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
duration 900ms, delay 0ms, threshold 10%, rootMargin 0px
언더라인 (CSS)
호버 시 언더라인
호버 시 on / 마우스아웃 시 off
duration 500ms, delay 0ms, threshold 10%, rootMargin 0px
duration 500ms, delay 0ms, threshold 10%, rootMargin 0px
가로줄 확장 (CSS)
clef_css_lineGrow_800_0_10_0px
클릭 시 토글
왼쪽에서 오른쪽으로 확장
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
왼쪽에서 오른쪽으로 확장
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
중앙에서 양옆 확장 (CSS)
clef_css_lineGrowCenter_800_0_10_0px
클릭 시 토글
중앙에서 양옆으로 확장
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
중앙에서 양옆으로 확장
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
떨어지며 사라짐 (CSS)
clef_css_dropOut_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
포커스 링 (CSS)
포커스 시 링
포커스/블러 토글
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
펼침 (JS)
클릭 시 토글
height 자동 확장
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
height 자동 확장
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
접힘 (JS)
클릭하여 접기 ▲
이 내용이 접힙니다.
여러 줄의 텍스트가
숨겨질 수 있습니다.
여러 줄의 텍스트가
숨겨질 수 있습니다.
클릭 시 토글
height 자동 축소
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
height 자동 축소
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
빛의 속도로 나타남 (JS)
clef_js_lightSpeed_1000_0_10_0px
클릭 시 토글
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
사선 슬라이드 (CSS, ↘) - slide로 재현
클릭 시 토글
distance x=60px, y=60px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
distance x=60px, y=60px, duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
5. 3D 효과
3D 이동, 회전, 확대/축소, 기울임 등 입체적인 효과
3D 이동 (CSS)
clef_css_translate3D-0-50--100_1000_0_10_0px
클릭 시 토글
x=0px, y=50px, z=-100px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
x=0px, y=50px, z=-100px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 이동 (JS)
clef_js_translate3D-0-50--100_1000_0_10_0px
클릭 시 토글
x=0px, y=50px, z=-100px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
x=0px, y=50px, z=-100px
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 회전 (CSS)
clef_css_rotate3D-100-0-0--180-0_1000_0_10_0px
클릭 시 토글
rotate-x=100%, y=0%, z=0%
angle-from=-180deg, angle-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
rotate-x=100%, y=0%, z=0%
angle-from=-180deg, angle-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 회전 (JS)
clef_js_rotate3D-100-0-0--180-0_1000_0_10_0px
클릭 시 토글
rotate-x=100%, y=0%, z=0%
angle-from=-180deg, angle-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
rotate-x=100%, y=0%, z=0%
angle-from=-180deg, angle-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 확대/축소 (CSS)
clef_css_scale3D-50-50-50-100-100-100_1000_0_10_0px
클릭 시 토글
scale-from: x=50%, y=50%, z=50%
scale-to: x=100%, y=100%, z=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from: x=50%, y=50%, z=50%
scale-to: x=100%, y=100%, z=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 확대/축소 (JS)
clef_js_scale3D-50-50-50-100-100-100_1000_0_10_0px
클릭 시 토글
scale-from: x=50%, y=50%, z=50%
scale-to: x=100%, y=100%, z=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from: x=50%, y=50%, z=50%
scale-to: x=100%, y=100%, z=100%
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 기울임 (CSS)
clef_css_skew3D-20-20-0-0_1000_0_10_0px
클릭 시 토글
skew-from: x=20deg, y=20deg
skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
skew-from: x=20deg, y=20deg
skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
3D 기울임 (JS)
clef_js_skew3D-20-20-0-0_1000_0_10_0px
클릭 시 토글
skew-from: x=20deg, y=20deg
skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
skew-from: x=20deg, y=20deg
skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
6. 조합 효과
슬라이드+회전, 줌+회전, 슬라이드+기울임 등 여러 효과를 결합한 애니메이션
슬라이드 회전 (CSS)
클릭 시 토글
distance: x=50px, y=50px
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=50px
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
슬라이드 회전 (JS)
클릭 시 토글
distance: x=50px, y=50px
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=50px
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
줌 회전 (CSS)
clef_css_zoomRotate-50-100--180-0_1000_0_10_0px
클릭 시 토글
scale-from=50%, scale-to=100%
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=50%, scale-to=100%
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
줌 회전 (JS)
clef_js_zoomRotate-50-100--180-0_1000_0_10_0px
클릭 시 토글
scale-from=50%, scale-to=100%
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
scale-from=50%, scale-to=100%
rotate-from=-180deg, rotate-to=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
슬라이드 기울임 (CSS)
클릭 시 토글
distance: x=50px, y=50px
skew-from: x=20deg, y=20deg, skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=50px
skew-from: x=20deg, y=20deg, skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
슬라이드 기울임 (JS)
클릭 시 토글
distance: x=50px, y=50px
skew-from: x=20deg, y=20deg, skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
distance: x=50px, y=50px
skew-from: x=20deg, y=20deg, skew-to: x=0deg, y=0deg
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
7. 인터랙션 효과
클릭, 호버, 포커스 등 사용자 상호작용에 반응하는 효과
흐릿하게 등장 (CSS)
clef_css_blur-10-0-0-100_800_0_10_0px
클릭 시 토글
blur-from=10px, blur-to=0px
opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
blur-from=10px, blur-to=0px
opacity-from=0%, opacity-to=100%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
좌우 흔들림 (CSS)
clef_css_shakeX_600_0_10_0px
클릭 시 토글
좌우만 흔들림
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
좌우만 흔들림
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
상하 흔들림 (CSS)
clef_css_shakeY_600_0_10_0px
클릭 시 토글
상하만 흔들림
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
상하만 흔들림
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
네온 깜빡임 (CSS)
clef_css_neonFlicker_1200_0_10_0px
클릭 시 토글
무한 반복
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
무한 반복
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
연기 효과 (CSS)
clef_css_smokeUp_1000_0_10_0px
클릭 시 토글
위로 사라짐
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
위로 사라짐
duration 1000ms, delay 0ms, threshold 10%, rootMargin 0px
형태 변형 (CSS)
clef_css_morph-0-50_800_0_10_0px
클릭 시 토글
radius-from=0%, radius-to=50%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
radius-from=0%, radius-to=50%
duration 800ms, delay 0ms, threshold 10%, rootMargin 0px
자석 호버 (JS)
호버해보세요
호버 시 마우스 따라옴
strength=30%
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
strength=30%
duration 600ms, delay 0ms, threshold 10%, rootMargin 0px
타이핑+블러 (JS)
안녕하세요
클릭 시 토글
blur-from=10px, blur-to=0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
blur-from=10px, blur-to=0px
duration 2000ms, delay 0ms, threshold 10%, rootMargin 0px
텍스트 분할 (JS)
분할 리빌 효과
클릭 시 토글
split-delay=100ms
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
split-delay=100ms
duration 1200ms, delay 0ms, threshold 10%, rootMargin 0px
진동 (CSS)
clef_css_vibrate_400_0_10_0px
클릭 시 토글
미세 진동 효과
duration 400ms, delay 0ms, threshold 10%, rootMargin 0px
미세 진동 효과
duration 400ms, delay 0ms, threshold 10%, rootMargin 0px