General CSS snippets for Bricks Builder

general-animations.css

/***************************
* Fade-in Animation fadeInUp
****************************
 Fade-in animation from bottom to top with staggered delay
*/
.an--fade-in-bottom-up {
  opacity: 0.3; /* Initial transparency (30% visible) */
  transform: translateY(20px); // Start position: 20px lower
  animation: fadeInUp 0.5s ease-out forwards; 
  /* fadeInUp = keyframe name
  0.5s = duration
  ease-out = decelerating effect
  forwards = keeps final state after animation

  Loop to create staggered animation delays for multiple elements
  Each subsequent element starts 0.2s later than the previous
  Change "10" to match the max number of animated elements  */
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation-delay: #{($i - 1) * 0.2}s;
    }
  }
}
/* Keyframes definition for fade-in and upward movement */
@keyframes fadeInUp {
  from {
    opacity: 0.5; // Slightly more visible at start
    transform: translateY(20px); // Lower starting position
  }
  to {
    opacity: 1; // Fully visible at the end
    transform: translateY(0); // Final position (no vertical shift)
  }
}



/***************************
* Animate icons on text link
****************************
/* Animate icons inside buttons and text links with class "an--cta-link" */
/* Default icon state:
   - Uses current text color (fill: currentColor)
   - Smooth transitions for both movement (transform) and color (fill) */
.an--cta-link svg {
  fill: currentColor; /* Inherit text color for consistency */
  transition: transform 0.3s ease, fill 0.3s ease; /* Smooth hover effects */
}
/* Hover state:
   - Slides icon 5px to the right for a subtle motion effect */
.an--cta-link:hover svg {
  transform: translateX(4px);
}
/* Special hover state for neutral buttons:
   - When a an--cta-link is a .btn--neutral (or inside one), icon turns white on hover
   - Ensures visibility against darker backgrounds */
.an--cta-link.btn--neutral:hover svg,
[class*="btn--neutral"]:hover .an--cta-link svg {
  fill: white;
}


/*******************
* zoom in effect 
******************** 
This code is optimized for a smooth, modern CSS scale hover effect. 
It uses GPU acceleration with translate3d(0,0,0), includes proper font smoothing, 
and applies a transition for ease-in and ease-out animation
*/
.an--hover-zoom {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform;
  transition: transform 0.2s ease;
}
.an--hover-zoom:hover {
  transform: scale(1.02) translate3d(0,0,0);
}