Welcome to this article, where I will guide you through some simple steps of creating a stunning CSS infinite flipping card animation. With my easy-to-follow instructions, you’ll be able to design a beautiful and eye-catching card in no time. Don’t miss this opportunity to elevate your website and impress your audience! 😉

Let’s proceed and direct our attention towards creating this distinctive animation!

CSS Infinite flipping card effect animation

The supplied HTML and SCSS (Sass) code generates a flip card that exhibits movement along both the Y and X axes. The X-axis and Y-axis represent two intersecting lines, defining the coordinates of a point in a two-dimensional space.

Now, let’s analyze the code one step at a time:

HTML structure

Let’s start by examining the HTML structure. We begin by creating a container element with the class flip-wrapper. This container acts as the main hub for our animation. Inside this container, we have a special area with the class flip-card. So, now we have a parent element and a child element. The parent element is where we will build the animation while the child element is the one that determines the appearance of our animation.

<div class="flip-wrapper">
  <div class="flip-card"></div>
</div>

<div class="flip-wrapper">
  <div class="flip-card"></div>
</div>

CSS Basic Structure

In our CSS code example, we start by making the whole page’s background-color a shade of gray (#c3c8c3).

Then, for the container called .flip-wrapper we decide its size by giving it a fixed width and height of 300 pixels. We also make it look circular or rounded by using the border-radius property. It’s important to mention that you can keep it square ⬛ if you prefer, but I went with the rounded look ⚫ because it helps us see clearly the effect.

Moving on to the .flip-card element, we set its width and height to 100% as a way to cover the entire available space. We make it look nicer by giving it a linear-gradient background using white and black colors. A subtle gray shadow effect is also a nice touch, giving a sense of depth. To keep the circular style consistent, we add the inherit value to border-radius property.

body {
  background-color: #213450; /* dark blue */
}

.flip-wrapper {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  .flip-card {
    width: 100%;
    height: 100%;
    background-color: #e1b6ea; /* lavender */
    box-shadow: inset 0 0 30px;
    border-radius: inherit;
  }
}

body {
  background-color: #213450; /* dark blue */
}

.flip-wrapper {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  .flip-card {
    width: 100%;
    height: 100%;
    background-color: #e1b6ea; /* lavender */
    box-shadow: inset 0 0 30px;
    border-radius: inherit;
  }
}

This is what’s currently visible on our screen.

You may also like 🎬

Static VS Dynamic Design With CSS – From Stillness to Action

August 29, 2025

How CSS Became So Powerful with Animations

June 28, 2025

Keyframes in CSS Explained – Make Your Animations Stand Out

March 22, 2025

Flipping Card Animation On Hover Using Transform And Transition CSS Properties

August 22, 2025

Creating the CSS flipping card effect animation

To achieve this captivating effect, we must employ the following two CSS properties: animation and @keyframes. Let’s dive deeper into their analytical exploration.

To create an infinite flipping card animation it is essential to connect the animation and @keyframes CSS properties. Otherwise, it won’t work.

Setting the animation CSS property

In this section of the code, we’re applying the CSS animation property to the element we want to make the animation, in our case to the .flip-wrapper class. The purpose of this property is to associate the animation with the element, as we mentioned above.

• First of all, we need a name for our animation. Here the animation is named rotation. This name acts as a reference point, allowing us to reuse and target this specific animation throughout our stylesheet.
• Then we have to give it a duration. Our example has a duration of 8 seconds 8s. This duration defines how long the animation takes to complete one cycle, indicating that the entire animation, from start to finish, will span over 8 seconds.
• Additionally, it’s set to repeat infinitely. This means that once the animation completes, it restarts immediately and runs continuously without a break. This creates a continuous animation effect (loop 🌪 😂).

In summary, we are using the animation property to apply an animation named ‘rotation’ to the .flip-wrapper class, making it last for 8 seconds and repeat indefinitely, resulting in an uninterrupted, continuous animation for an element.

.flip-wrapper {
  ...
  animation: rotation 8s infinite;
  .flip-card {
    ...
  }
}

.flip-wrapper {
  ...
  animation: rotation 8s infinite;
  .flip-card {
    ...
  }
}

Ways to add the @keyframes

In the @keyframes rotation section, we define the animation behavior. It specifies a transformation that involves rotating an element around its X-axis and Y-axis. Here’s a breakdown of its key components:

• @keyframes: This is the rule used to define the keyframes for the animation. Keyframes specify how the animation should change over time, in this case, from the starting state (from) to the ending state (to).
• rotation: This is the name given to the animation, and it will be used to reference the animation when applying it to elements using the animation property.
• from and to: These define the initial and final states of the animation. In the from state, the element has a rotation of 0 degrees around the X-axis, meaning it starts with no rotation. In the to state, the element is rotated 360 degrees, completing one full rotation, around the X-axis and/or Y-axis.
• transform: The transform property is used to apply a specific transformation to the element. In rotation animations, (the specific transformation applied can vary, such as rotating, scaling, or skewing the element.) it enables the element to change its orientation.

transform: rotateY()

In the following CSS animation, named rotation , our animation starts from a rotation of 0 degrees (from) and smoothly transitions to a 360-degree rotation (to) around the Y-axis.

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

transform: rotateX()

This CSS animation, named rotation rotates the element around its X-axis. It starts (from) with no rotation (0 degrees) and smoothly completes (to) a full 360-degree rotation.

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

We have the capability to create rotations along both the Y and X axis at the same time.

transform: rotateX() rotateY()

In this CSS animation named rotation the element is rotated in both the X and Y axes. It starts (from) with no rotation (0 degrees in both axes) and gradually complete (to) a full 360-degree rotation in both the X and Y axes. This animation can create a complex spinning effect that involves rotations in multiple directions. Cool huh!! 😎

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

What to avoid when making a CSS flipping card effect animation

As a reminder, it’s important to ensure that our animation transitions smoothly. To achieve a complete rotation, we must rotate (from) 0 degrees (to) 360 degrees. In the provided animation code, the @keyframes specifies a rotation of (160 deg) for both the X and Y axes, resulting in a card flip effect. However, this setup does not create a smooth transition beyond the 180-degree point. The card abruptly returns to its initial position, giving it a characteristic stop-and-return appearance. To achieve a more natural and realistic flipping effect, we need to ensure a complete 360-degree rotation or a half 180-degree rotation.

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(160deg) rotateY(160deg);
  }
}

/* ANIMATION */
@keyframes rotation {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(160deg) rotateY(160deg);
  }
}

🌼 Hope you found my post interesting and helpful.
Thanks for being here! 🌼

Hi there! 😃 In today’s post, we will analyze the amazing CSS @keyframes rule, an incredibly powerful tool for creating complex and visually stunning animations on web pages.

Understanding keyframes in CSS

In simple terms, keyframes define the animation’s behavior through a series of @keyframes which describes how the animation should change over time.
Each keyframe represents a specific point in time, and CSS smoothly transitions between these keyframes to create fluid motion.

With CSS keyframes, you can create various animations, from simple color changes to complex effects like movements and transformations. By combining keyframes with other CSS properties, we can control timing and duration and create dynamic and visually engaging websites.

I will provide you with an example that will make this at-rule crystal clear. 🧐 Let’s grab a ☕ and move forward. 🚀 We’ve got this!

Example of keyframes in CSS: The theory behind it

The details of the animation will depend on the specific effect we want to achieve. Let’s say we want to create an animation where a square ⬛ transforms into a circle ⚫ and then back into a square ⬛ again. Additionally, the color 🌈 of the shape changes during the animation, and there are some movements and transitions involved. It might seem massive and confusing, 😰 but we can deal with it step by step together! 🛠

For our animation to be smooth and realistic, we need to define the @keyframes. The first keyframe serves as the starting point (0%), followed by intermediate points and the final keyframe (100%) that marks the end of the animation and returns to the starting point.

😃The following code snippet provides a quick example of a keyframes structure in action.

@keyframes name-of-keyframe {
  0% {
    ... /* this is the starting point */
  }
  50% {
    ... /* this is one intermediate point */
  }
  100% {
    ... /* this is the ending point */
  }
}

@keyframes name-of-keyframe {
  0% {
    ... /* this is the starting point */
  }
  50% {
    ... /* this is one intermediate point */
  }
  100% {
    ... /* this is the ending point */
  }
}

To create these keyframes, you’ll need to use CSS animation properties, such as animation-name, animation-duration, animation-iteration-count and animation-delay. The animation-name property connects the animation to its keyframes, while the other properties control how long it should last, how it should behave over time, and whether it has a delay before starting..

Once you’ve defined your keyframes and animation properties, CSS will automatically insert transitions between the keyframes to create smooth changes. This means you don’t need to worry about manual calculations. CSS takes care of it for you. Cool huh!? 😎 ✨

Example of keyframes in CSS: Practical implementation

As we already mentioned, we will work with a box. We need to start with the HTML code and create a <div> element that has the class name .box.

<div class="box"></div>

<div class="box"></div>

Then, in our CSS code, we define the basic properties. It should be a square with a width and height of 200 pixels, and we’ll keep the background-color simple by using black for now.

.box {
  width: 200px;
  height: 200px;
  background-color: black;
}

This is what is rendered on the screen for now. A simple black box.

Applying animation effects to the elements

To add animation effects to our <div> element, we need to define the animation properties of our class .box. We set the animation-name, which is the animation’s name, then the animation-duration, which is the time the animation takes to complete, and finally, the animation-iteration-count which declares how many times the animation should repeat.

.box {
  ...
  animation-name: my-animation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {}

.box {
  ...
  animation-name: my-animation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {}

Then, we create our animation using the @keyframes rule, where we can specify the values of the CSS properties at different points during the animation. The most crucial step is to link the animation to our element. We do this by using the animation-name property and assigning it to the same name we defined earlier. In our case my-animation.

Transforming colors and shapes with animation

We will start our transformations by working with colors and shapes using the background-color and border-radius properties.

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    background-color: pink;
  }
  25% {
    background-color: purple;
    border-radius: 50%;
  }
  50% {
    background-color: black;
    border-radius: 50%;
  }
  75% {
    background-color: purple;
    border-radius: 50%;
  }
  100% {
    background-color: pink;
  }
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    background-color: pink;
  }
  25% {
    background-color: purple;
    border-radius: 50%;
  }
  50% {
    background-color: black;
    border-radius: 50%;
  }
  75% {
    background-color: purple;
    border-radius: 50%;
  }
  100% {
    background-color: pink;
  }
}

As we can see, it begins with a pink square at starting point: 0%. Then, it transitions to purple (25%) where it starts becoming cyclic. After that, it turns to black (50%) and remains a full circle. Then (75%) shifts to purple again, where it starts transitioning back to a square. Finally (ending point: 100%) turns to a pink square.

Animating Element Position

The next step is adjusting the position of our box. To do this, we need to adjust the positioning of the HTML element associated with our .box class and set it to position: relative, allowing it to move within its container.

Now, let’s animate its movement:

• The animation starts at the top-left corner 0%.
• At 25%, it moves diagonally by changing both the top and left values.
• At 50%, it continues moving horizontally to the left.
• At 75%, it moves diagonally back by adjusting top and left again.
• Finally, at 100%, it returns to its original position at the top-left corner.

.box {
  ...
  position: relative;
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    ...
    left: 0px;
    top: 0px;
  }
  25% {
    ...
    left: 200px;
    top: 100px;
  }
  50% {
    ...
    left: 300px;
  }
  75% {
    ...
    left: 200px;
    top: 100px;
  }
  100% {
    ...
    left: 0px;
    top: 0px;
  }
}

.box {
  ...
  position: relative;
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    ...
    left: 0px;
    top: 0px;
  }
  25% {
    ...
    left: 200px;
    top: 100px;
  }
  50% {
    ...
    left: 300px;
  }
  75% {
    ...
    left: 200px;
    top: 100px;
  }
  100% {
    ...
    left: 0px;
    top: 0px;
  }
}

Animating Element Rotation

We can also make our box a little bit playful! 🤹‍♀️ We will add some extra moves with the amazing transform CSS property.

We will apply a rotation only between 25% and 75%.

• The animation starts with no rotation at 0%.
• At 25%, the element remains unrotated with transform: rotateY(0deg).
• At 50%, it completes a full rotation with transform: rotateY(360deg)
• At 75%, it returns to its original position with transform: rotateY(0deg).
• Finally, at 100%, the cycle resets, ready to repeat.

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    ...
  }
  25% {
    ...
    transform: rotateY(0deg);
  }
  50% {
    ...
    transform: rotateY(360deg);
  }
  75% {
    ...
    transform: rotateY(0deg);
  }
  100% {
    ...
  }
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    ...
  }
  25% {
    ...
    transform: rotateY(0deg);
  }
  50% {
    ...
    transform: rotateY(360deg);
  }
  75% {
    ...
    transform: rotateY(0deg);
  }
  100% {
    ...
  }
}

Now, let’s try to make it even more impressive by enriching the starting and ending phases.

• At 0%, we add transform: rotateX(360deg).
• At 25%, it resets with transform: rotateX(0deg), creating a rotation along the X-axis from 0% to 25%.
• At 50% and 75%, we maintain a non-rotating phase with transform: rotateX(0deg).
• Finally, at 100%, we add transform: rotateX(360deg), creating another rotation from 75% to 100%.

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    ...
    transform: rotateX(360deg);
  }
  25% {
    ...
    transform: rotateX(0deg);
  }
  50% {
    ...
    transform: rotateX(0deg);
  }
  75% {
    ...
    transform: rotateX(0deg);
  }
  100% {
    ...
    transform: rotateX(360deg);
  }
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    ...
    transform: rotateX(360deg);
  }
  25% {
    ...
    transform: rotateX(0deg);
  }
  50% {
    ...
    transform: rotateX(0deg);
  }
  75% {
    ...
    transform: rotateX(0deg);
  }
  100% {
    ...
    transform: rotateX(360deg);
  }
}

Inserting content into the animated element

We can also add any content we want (text, image, emoticon, etc.) inside our HTML element. For our example, I use an emoticon and set its font-size to 100px.

<div class="box">
  <div class="emoticon">🪐</div>
</div>

<div class="box">
  <div class="emoticon">🪐</div>
</div>

.box .emoticon {
  font-size: 100px;
}

.box .emoticon {
  font-size: 100px;
}

Delaying the animation start

We can add a delay to our animation by setting the animation-delay CSS property. This delay momentarily pauses the animation before it begins, creating a smoother and more controlled start.

For instance, if we set the delay to 2s, the animation will start after 2 seconds. However, please note that this delay occurs only once when we first see the animation. To observe the effect again, we may need to refresh the page. 

.box {
  ...
  animation-delay: 2s;
}

.box {
  ...
  animation-delay: 2s;
}

You can see the animation with the delay effect below. It starts with its initial black background-color and after the 2s it starts the transitions we created with the @keyframes. 😉

Using the @keyframes shorthand for animations

By using shorthand, you can save space and time while improving your code’s readability. Instead of writing multiple properties separately, you can define them all using just the animation shorthand.

.box {
  animation-name: my-animation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  
  /* Here’s the shorthand version */
  animation: my-animation 10s 2s infinite;
}

.box {
  animation-name: my-animation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  
  /* Here’s the shorthand version */
  animation: my-animation 10s 2s infinite;
}

You may also like 🎬

How To Make a CSS Shine Effect Animation

July 17, 2024

How to Make A Blinking Animation Using CSS

September 20, 2024

Make Amazing CSS 2D Card With Flipping Animation On Hover

July 1, 2024

How To Effectively Use CSS Transform Scale On Hover

May 10, 2024

Complete CSS animation code (copy & paste ready)

Below is the full code referenced in this blog post. Feel free to copy and use it in your own projects.

If you have any questions or encounter any issues, don’t hesitate to ask for help. You can easily copy the desired code snippet by clicking on the copy icon, located in the top-right corner of each snippet.

We’d love to hear your thoughts! If you have feedback or questions, drop a comment below.

<div class="box">
  <div class="emoticon">🪐</div>
</div>

<div class="box">
  <div class="emoticon">🪐</div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  background-color: black;
  
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  animation: my-animation 10s 2s infinite;
}

.box .emoticon {
  font-size: 100px;
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    left: 0px;
    top: 0px;
    background-color: pink;
    transform: rotateX(360deg);
  }
  25% {
    left: 200px;
    top: 100px;
    background-color: purple;
    border-radius: 50%;
    transform: rotateY(0deg) rotateX(0deg);
  }
  50% {
    left: 300px;
    background-color: black;
    border-radius: 50%;
    transform: rotateY(360deg) rotateX(0deg);
    visibility: visible;
  }
  75% {
    left: 200px;
    top: 100px;
    background-color: purple;
    border-radius: 50%;
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    left: 0px;
    top: 0px;
    background-color: pink;
    transform: rotateX(360deg);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  background-color: black;
  
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  
  animation: my-animation 10s 2s infinite;
}

.box .emoticon {
  font-size: 100px;
}

/* ----- MY ANIMATION ----- */
@keyframes my-animation {
  0% {
    left: 0px;
    top: 0px;
    background-color: pink;
    transform: rotateX(360deg);
  }
  25% {
    left: 200px;
    top: 100px;
    background-color: purple;
    border-radius: 50%;
    transform: rotateY(0deg) rotateX(0deg);
  }
  50% {
    left: 300px;
    background-color: black;
    border-radius: 50%;
    transform: rotateY(360deg) rotateX(0deg);
    visibility: visible;
  }
  75% {
    left: 200px;
    top: 100px;
    background-color: purple;
    border-radius: 50%;
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    left: 0px;
    top: 0px;
    background-color: pink;
    transform: rotateX(360deg);
  }
}