랩

애니메이션 키트

Slide · Fade · Scale · Bounce · Shake · Roll · Spin · Flash — 39종 popular CSS 애니메이션 (4방향 시리즈 통일). 클릭해서 골라 파라미터 조절 후 keyframe·class를 한 줄로 export.

CSS

.my-element {
  animation: fade-in-up 600ms ease-out 0ms 1 normal both;
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

HTML

<div class="my-element">콘텐츠</div>

.my-element {
  animation: fade-in-up 600ms ease-out 0ms 1 normal both;
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}