CSS 애니메이션 생성기
시각적으로 CSS 키프레임 애니메이션을 만듭니다. 실시간 미리보기로 타이밍, 이징 및 키프레임을 구성합니다.
%
%
%
@keyframes myAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
}
/* Shorthand */
.animated-element-shorthand {
animation: myAnimation 1s ease 0s infinite normal none;
}CSS Keyframe Animations - 기술 세부 정보
CSS animations allow you to animate transitions between CSS styles. Use @keyframes to define animation steps, then apply with animation properties: name, duration, timing-function, delay, iteration-count, direction, and fill-mode.
명령줄 대안
@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n.element {\n animation: fadeIn 0.3s ease-out;\n}