Rotate In Animation

FREE

A rotate in animation for elements

Demo

Rotate In
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

Installation

1

Copy and paste the following code into your project.

Add the following keyframes and animations to your global.css file.

global.css

@layer utilities {
    // START HERE ------------------------------------------------------------
    .animate-rotate-in {
        animation: rotateIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes rotateIn {
        from {
            transform: rotate(-45deg) scale(0.1);
            opacity: 0;
        }
        to {
            transform: rotate(0) scale(1);
            opacity: 1;
        }
     }
    // END HERE ------------------------------------------------------------
}

2

Use the class animate-rotate-in to apply the animation to an element.


<div class="animate-rotate-in">
  // Your content here
</div>
      
3

Start using the animation