프리셋, duration, delay, timing-function, 반복
결과 대기 중
계산 방법과 기준
CSS Animations는 @keyframes로 중간 상태를 정의하고 animation shorthand로 duration, timing-function, delay, iteration-count 등을 적용합니다.
계산식과 처리 기준
- animation = name duration timing-function delay iteration-count fill-mode
- @keyframes name { from/0% ... to/100% ... }
- 권장 속성 = transform, opacity
계산 예시
0.6초 아래에서 올라오는 fade-up 효과는?
- 프리셋
- fade-up
- duration
- 0.6s
- delay
- 0s
- timing-function
- ease-out
- 반복
- 1회
결과fade-up
CSS animation shorthand와 @keyframes 코드를 생성했습니다.
무한 회전 로딩 스피너는?
- 프리셋
- spin
- duration
- 1s
- delay
- 0s
- timing-function
- linear
- 반복
- 무한 반복
결과spin
CSS animation shorthand와 @keyframes 코드를 생성했습니다.
CSS animation 구성요소
| 항목 | 설명 | 예시 |
|---|---|---|
| duration | 한 번 재생되는 시간 | 0.6s |
| timing-function | 속도 곡선 | ease-out, linear |
| delay | 시작 전 대기 시간 | 0.1s |
| iteration-count | 반복 횟수 | 1, infinite |
| fill-mode | 재생 전후 스타일 유지 | both |
주의사항
- 움직임에 민감한 사용자를 위해 @media (prefers-reduced-motion: reduce)에서 애니메이션을 끄는 코드를 함께 넣으세요(WCAG 2.3.3).
키프레임도 만들어지나요?
네. 지속시간·이징 등을 설정하면 @keyframes와 animation 속성을 함께 생성합니다.
- 무한 반복 애니메이션은 사용자의 주의를 오래 끌 수 있어 필요한 곳에만 사용하세요.
- transform과 opacity 중심 애니메이션은 레이아웃 변경보다 성능에 유리합니다.
- 접근성상 큰 움직임은 prefers-reduced-motion 대응을 추가하는 것이 좋습니다.
계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리