I have a query about CSS animation and transform. I am looking to create a flipping effect on two divs - one flips up from the bottom, then back down, followed by the second div flipping up and back down. I want this sequence to repeat indefinitely with pauses in between so they don't flip simultaneously.
NOTE: I've attempted using animation-delay and various CSS animation tricks such as defining keyframes at different percentages, but I haven't been able to achieve the desired effect.
Edit: Here is a JSFiddle link demonstrating the issue I'm facing: https://jsfiddle.net/9qx0Lnj6/1/
Quick Update: Here's a GIF illustrating what I'm trying to accomplish visually:
<div class="container">
<div class="icon-wrap">
<div class="icon-one icon">
One
</div>
<div class="icon-two icon">
Two
</div>
</div>
</div>
`.container {
position: relative;
.icon-wrap {
position: relative;
width: 50px;
height: 50px;
overflow:hidden;
perspective:1000px;
.icon {
position:absolute;
width:50px;
height:50px;
}
.icon-one {
background:red;
transform-origin: bottom;
transform-style: preserve-3d;
animation: 3s flip 2s infinite linear;
}
.icon-two {
background:blue;
transform-origin: bottom;
transform-style: preserve-3d;
animation: 3s flip infinite linear;
}
}
}`
@keyframes flip{
0% {
transform: rotateX(180deg)
}
14% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg);
}
}