Angular tailwind floating animation / cloud animation 앵귤러 구름 둥둥 애니메이션 예시

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px); // 이동 거리를 조정하여 원하는 속도로 설정
  }
}

.animate-bounce {
  animation: bounce 5s infinite; // 애니메이션 지속 시간을 조정하여 원하는 속도로 설정
}

1. tailwind 에서 제공하는 animate-bounce 효과를 커스텀하여 구름 효과로 만드는 예시 (css, scss)

 

 

<!-- cloud -->
    <img
      [src]="setCloudImage()"
      class="animate-bounce"
    />

2. 템플릿 예시