애니메이션 가능한 속성은?

transform, opacity, color, width, height, border-radius 등.

이름

무료 온라인 CSS 키프레임 애니메이션 생성, 설치 불필요

설정

이름

지속 시간 (s)

이징

ease-out

방향

normal

반복 횟수

시작 상태

opacity

transform

종료 상태

opacity

transform

결과

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out 1 normal;
}

미리보기

Box

이 도구가 도움이 되었다면, 개발자에게 커피 한 잔을 사주세요.

커피 사주기

이름

CSS 애니메이션 생성 방법

더 보기

댓글