28+ Unique CSS Animations Code

Contents

  1. Generate Animation
  2. List Of Animations
  3. Card Hover Flip Animation
  4. 3D Rotating Cube Animation

28 unique animation styles, customizable easing functions, adjustable delays, and the option for infinite looping, this tool is perfect for anyone looking to add animations effortlessly to their projects. Best of all, it instantly generates the CSS code for you.

Bounce Flash, Fade, Zoom, Flash, Pulse, Rotate, Shake and more Animations.

How It Works

  1. Choose an Animation Style: Select from 28 pre-made animation options that are ready to use.
  2. Select an Easing Function: Pick the easing style that best matches the tone of your animation.
  3. Adjust Timing & Delay: Set the duration, delay, and overall timing to fine-tune how your animation behaves.
  4. Enable Infinite Looping: Toggle the infinite loop option to make your animation repeat endlessly if needed.
  5. Generate Code Instantly: The CSS code for your selected options will be generated on the spot, ready to copy and paste into your project.

Select Animation And Live Preview

Our tool includes a live preview feature that allows you to see the effects of your selected animations in real-time. As you adjust the settings, the preview updates instantly, giving you immediate feedback on how the animation will look. This feature makes it easy to experiment with different styles and timing before finalizing your animation.

Animate element:
Text Animation
Bounce
Animation options:

Instant Code Output

No need to manually write CSS code. Once you have customized your animation, the tool automatically generates the CSS code for you. Simply copy and paste the generated code into your website style-sheet.

Generated CSS Rotate Code:

HTML
<div class="text-style animation-bounce">Text Animation</div>
CSS
.text-style {
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.animation-bounce {
    animation-name: bounce;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) }
    40% {transform: translateY(-30px) }
    60% {transform: translateY(-15px) }
}

Click the button below try it yourself edit preview real-time

Example Use Cases

  • Button Hover Effects: Add subtle hover animations to your buttons for an interactive user experience.
  • Loading Spinners: Create looping animations for loading indicators that keep users engaged while content loads.
  • Text Reveal Effects: Use animations to reveal text in a stylish way, perfect for hero sections or landing pages.

List Of Animations Names

  • Bounce
  • Boing
  • Bomb
  • Fade
  • Flash
  • Flip
  • Foolish
  • Hinge
  • Hole
  • Light
  • Pulse
  • Rotate
  • Roll
  • Shake
  • Swing
  • Tada
  • Wiggle
  • Wobble
  • Rubber
  • Jello
  • Magic
  • Twister
  • Puff
  • Vanish
  • Space
  • Perspective
  • Swash
  • Zoom

Card Hover Flip Animation

The Card Flip Animation offers a sleek and interactive 3D effect where a card flips along its Y-axis, revealing the back content when hovered. This effect is ideal for interactive components like profile cards, product descriptions, or even quizzes.

You can customize the content, colors, and timing. by clicking the buttons below "try it yourself" edit and preview live

Preview:

Front Side
Back Side

Code:

HTML
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front"> Front Side </div>
        <div class="flip-card-back"> Back Side </div>
    </div>
</div>
CSS
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
    /* Enables the 3D effect */
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 10px;
}
.flip-card-front {
    background-color: #3498db;
}
.flip-card-back {
    background-color: #2ecc71;
    transform: rotateY(180deg);
}
Try it yourself

3D Cube Rotation Animation

The 3D Rotating Cube Animation introduces an engaging way to present content on multiple sides of a cube. Each face of the cube can hold unique content (text, images, etc.)

The cube spins continuously or can be triggered by user actions, making it ideal for showcasing multiple features, services, or pieces of information in a compact, visually appealing way. You can further customize the cube size, rotation speed, and content on each side.

Preview:

Front
Back
Right
Left
Top
Bottom
Size and Speed:
Setting Multiple Rotations:

Code:

HTML
<div class="cube-container">
    <div class="cube">
        <div class="front">Front</div>
        <div class="back">Back</div>
        <div class="right">Right</div>
        <div class="left">Left</div>
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
</div>
CSS
.cube-container {
    width: 200px;
    height: 200px;
    perspective: 600px;
    margin: 100px auto;
}
.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 10s infinite linear;
}
.cube > div {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0px solid #ccc;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cube .front {
    transform: rotateY(0deg) translateZ(100px);
    background-color: rgba(231, 77, 60, 0.5);
}
.cube .back {
    transform: rotateY(180deg) translateZ(100px);
    background-color: rgba(52, 152, 219, 0.5);
}
.cube .right {
    transform: rotateY(90deg) translateZ(100px);
    background-color: rgba(46, 204, 112, 0.5);
}
.cube .left {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: rgba(241, 196, 15, 0.5);
}
.cube .top {
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(156, 89, 182, 0.5);
}
.cube .bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background-color: rgba(255, 119, 0, 0.5);
}
@keyframes rotateCube {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
Try it yourself

Related: