Zoom Transition

보통

확대/축소되며 나타나고 사라지는 전환 효과

#transition#zoom#scale

라이브 데모

🔍

Zoom Transition

확대/축소되며 나타나고 사라지는 효과

코드

ZoomTransition.tsx

export const ZoomTransition = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className={`zoom-transition ${isVisible ? 'zoom-transition-visible' : ''}`}>
      <div className="transition-content">
        <h3>Zoom Transition</h3>
      </div>
    </div>
  );
};

transitions.css

.zoom-transition {
  transform: scale(0);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zoom-transition-visible {
  transform: scale(1);
  opacity: 1;
}