Where B2B brands like
.logo-stack {
position: relative;
isolation: isolate;
}
.stack-item {
position: absolute;
inset: 0;
overflow: hidden;
transform-origin: center top;
animation: cardFlip 18s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* CRITICAL FIX: Use NEGATIVE delays to start animations mid-cycle */
/* This makes the animation behave as if it's already been running */
/* First logo-stack */
.logo-stack-1 .stack-item:nth-child(1) {
animation-delay: 0s; /* Starts at beginning (front) */
}
.logo-stack-1 .stack-item:nth-child(2) {
animation-delay: -12s; /* Starts at 6s position in the cycle (second) */
}
.logo-stack-1 .stack-item:nth-child(3) {
animation-delay: -6s; /* Starts at 12s position in the cycle (hidden) */
}
/* Second logo-stack (offset by 2s) */
.logo-stack-2 .stack-item:nth-child(1) {
animation-delay: -16s; /* Starts at 2s position */
}
.logo-stack-2 .stack-item:nth-child(2) {
animation-delay: -10s; /* Starts at 8s position */
}
.logo-stack-2 .stack-item:nth-child(3) {
animation-delay: -4s; /* Starts at 14s position */
}
/* Third logo-stack (offset by 4s) */
.logo-stack-3 .stack-item:nth-child(1) {
animation-delay: -14s; /* Starts at 4s position */
}
.logo-stack-3 .stack-item:nth-child(2) {
animation-delay: -8s; /* Starts at 10s position */
}
.logo-stack-3 .stack-item:nth-child(3) {
animation-delay: -2s; /* Starts at 16s position */
}
.stack-item img {
width: 100%;
height: 100%;
object-fit: cover;
animation: imageOpacity 18s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* Grey overlay that shows when NOT in front */
.stack-item::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* CRITICAL FIX: Use same NEGATIVE delays for overlays */
/* First logo-stack overlays */
.logo-stack-1 .stack-item:nth-child(1)::before {
animation: showOverlay 18s 0s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-stack-1 .stack-item:nth-child(2)::before {
animation: showOverlay 18s -12s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-stack-1 .stack-item:nth-child(3)::before {
animation: showOverlay 18s -6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* First logo-stack images */
.logo-stack-1 .stack-item:nth-child(1) img {
animation-delay: 0s;
}
.logo-stack-1 .stack-item:nth-child(2) img {
animation-delay: -12s;
}
.logo-stack-1 .stack-item:nth-child(3) img {
animation-delay: -6s;
}
/* Second logo-stack overlays */
.logo-stack-2 .stack-item:nth-child(1)::before {
animation: showOverlay 18s -16s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-stack-2 .stack-item:nth-child(2)::before {
animation: showOverlay 18s -10s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-stack-2 .stack-item:nth-child(3)::before {
animation: showOverlay 18s -4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* Second logo-stack images */
.logo-stack-2 .stack-item:nth-child(1) img {
animation-delay: -16s;
}
.logo-stack-2 .stack-item:nth-child(2) img {
animation-delay: -10s;
}
.logo-stack-2 .stack-item:nth-child(3) img {
animation-delay: -4s;
}
/* Third logo-stack overlays */
.logo-stack-3 .stack-item:nth-child(1)::before {
animation: showOverlay 18s -14s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-stack-3 .stack-item:nth-child(2)::before {
animation: showOverlay 18s -8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-stack-3 .stack-item:nth-child(3)::before {
animation: showOverlay 18s -2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* Third logo-stack images */
.logo-stack-3 .stack-item:nth-child(1) img {
animation-delay: -14s;
}
.logo-stack-3 .stack-item:nth-child(2) img {
animation-delay: -8s;
}
.logo-stack-3 .stack-item:nth-child(3) img {
animation-delay: -2s;
}
@keyframes imageOpacity {
/* Front position - image fully visible */
0%, 31% {
opacity: 1;
}
/* Quick transition */
31.5% {
opacity: 1;
}
/* Second position - hide image, only show grey overlay */
98.5% {
opacity: 0;
}
/* Quick return to front */
99%, 100% {
opacity: 1;
}
}
@keyframes cardFlip {
/* Front position - hold for longer */
0%, 31% {
transform: translateY(0px) scale(1);
z-index: 3;
opacity: 1;
border-radius: 16px;
visibility: visible;
}
/* Quick transition - POP UP from below */
31.5% {
transform: translateY(10px) scale(0.75);
z-index: 2;
opacity: 0.8;
border-radius: 12px;
visibility: visible;
}
/* Second position - settled and hold */
33.33%, 64.33% {
transform: translateY(-8px) scale(0.80);
z-index: 2;
opacity: 1;
border-radius: 12px;
visibility: visible;
}
/* Immediate fade to hidden - no gradual transition */
64.5%, 97.66% {
transform: translateY(-8px) scale(0.80);
z-index: 1;
opacity: 0;
border-radius: 12px;
visibility: hidden;
}
/* Quick return to front */
99% {
transform: translateY(0px) scale(0.95);
z-index: 3;
opacity: 0.9;
border-radius: 16px;
visibility: visible;
}
100% {
transform: translateY(0px) scale(1);
z-index: 3;
opacity: 1;
border-radius: 16px;
visibility: visible;
}
}
@keyframes showOverlay {
/* When at front - NO overlay, hold */
0%, 31% {
background: transparent;
opacity: 0;
border-radius: 16px;
}
/* Quick pop up transition */
31.5% {
background: #C2C2C2;
opacity: 0.8;
border-radius: 12px;
}
/* When at second position - GREY, hold */
33.33%, 64.33% {
background: #C2C2C2;
opacity: 1;
border-radius: 12px;
}
/* When hidden - immediately hidden, hold */
64.5%, 97.66% {
background: #C2C2C2;
opacity: 1;
border-radius: 12px;
}
/* Quick return to front */
99%, 100% {
background: transparent;
opacity: 0;
border-radius: 16px;
}
}
/* Mobile: Animation with smaller border radius for front only */
@media (max-width: 768px) {
@keyframes cardFlip {
0%, 31% {
transform: translateY(0px) scale(1);
z-index: 3;
opacity: 1;
border-radius: 14px;
visibility: visible;
}
31.5% {
transform: translateY(10px) scale(0.75);
z-index: 2;
opacity: 0.8;
border-radius: 12px;
visibility: visible;
}
33.33%, 64.33% {
transform: translateY(-8px) scale(0.80);
z-index: 2;
opacity: 1;
border-radius: 12px;
visibility: visible;
}
/* Immediate hidden state */
64.5%, 97.66% {
transform: translateY(-8px) scale(0.80);
z-index: 1;
opacity: 0;
border-radius: 12px;
visibility: hidden;
}
/* Quick return to front */
99% {
transform: translateY(0px) scale(0.95);
z-index: 3;
opacity: 0.9;
border-radius: 14px;
visibility: visible;
}
100% {
transform: translateY(0px) scale(1);
z-index: 3;
opacity: 1;
border-radius: 14px;
visibility: visible;
}
}
@keyframes showOverlay {
0%, 31% {
background: transparent;
opacity: 0;
border-radius: 14px;
}
31.5% {
background: #C2C2C2;
opacity: 0.8;
border-radius: 12px;
}
33.33%, 64.33% {
background: #C2C2C2;
opacity: 1;
border-radius: 12px;
}
/* When hidden - immediately hidden */
64.5%, 97.66% {
background: #C2C2C2;
opacity: 1;
border-radius: 12px;
}
99%, 100% {
background: transparent;
opacity: 0;
border-radius: 14px;
}
}
}
come to scale