SUPER EASY UTILS
Tool #400 Special Edition

CSS 애니메이션 생성기

CSS 키프레임 애니메이션을 시각적으로 디자인하고 즉시 코드를 생성하세요.

미리보기

Start
Animate

생성된 CSS

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

애니메이션 설정

2s

시작 상태0%

0, 0
1
0°
1
#3b82f6

끝 상태100%

100, 0
1.2
45°
1
#ec4899

추천 도구

유용할 수 있는 엄선된 도구