계산 로직과 결과 카드가 연결된 상태입니다.
개발계산 가능
CSS 애니메이션 생성기
CSS animation shorthand와 @keyframes 코드를 생성합니다.
결과 대기 중
이 계산기를 이렇게 설계했습니다.
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
CSS animation 구성요소
| 항목 | 설명 | 예시 |
|---|---|---|
| duration | 한 번 재생되는 시간 | 0.6s |
| timing-function | 속도 곡선 | ease-out, linear |
| delay | 시작 전 대기 시간 | 0.1s |
| iteration-count | 반복 횟수 | 1, infinite |
| fill-mode | 재생 전후 스타일 유지 | both |
계산식에 사용된 방법
- 프리셋, duration 등 값을 입력 형식에 맞게 확인한 뒤 계산합니다.
- 형식과 입력 규칙을 검증한 뒤 개발 도구 목적에 맞는 생성 또는 변환을 적용합니다.
- 결과는 검산과 복사에 바로 쓰기 쉬운 형태로 보여주는 방식을 사용합니다.
주의사항
- 선택한 옵션에 따라 적용 기준과 결과 해석이 달라질 수 있습니다.
- 소수점 자리수와 반올림 방식에 따라 화면에 보이는 값이 조금 달라질 수 있습니다.
- 언어, 런타임, 인코딩, 환경 차이에 따라 실제 결과가 다르게 보일 수 있습니다.
키프레임도 만들어지나요?
네. 지속시간·이징 등을 설정하면 @keyframes와 animation 속성을 함께 생성합니다.
- 무한 반복 애니메이션은 사용자의 주의를 오래 끌 수 있어 필요한 곳에만 사용하세요.
- transform과 opacity 중심 애니메이션은 레이아웃 변경보다 성능에 유리합니다.
- 접근성상 큰 움직임은 prefers-reduced-motion 대응을 추가하는 것이 좋습니다.