You can use data attributes for animation names, delays, and durations if you want to get support from Javascript. Or you can use helper classes like .animation-delay-600 or .animation-duration-400. You must use Goldman for these helper classes.

You will see :root in the downloaded files to customize --fadeInLeft animation.

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: var(--fadeInLeft);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

You will see the :root in your downloaded files to edit all animations.

<div class="some-goldman-classes animated" data-animation="fadeInLeft"
     data-animation-delay="250" data-animation-duration="600">
     Some great content…
</div>

You can actively use these animations as a group. Just what you need; Give the container the class .group and give the element you want to animate with the animation you want, starting with .group-hover-.

You can use them directly in your portfolio works. You can have great animations without writing any css. It will work great on mobile devices.

These animations can be given to as many items as you want. You can give them different delay, duration and animation.

<!-- Container for boxes -->
<div class="container lg-mt-5 sm-mt-3">
     <!-- Row for boxes -->
     <div class="flex-row">
          <!-- Column for animated box -->
          <div class="lg-column-4 sm-column-12">
               <!-- Group for box -->
               <div class="bg-colored-100 group has-overlay py-16 rounded-xl px-5 bg-auto" data-bg="assets/any-image.svg">
                    <!-- Overlay -->
                    <div class="hover-overlay bg-semi-60 bg-semi-dark-200 rounded-inherit p-4 transition duration-200 text-md text-white">
                         <!-- Animated item -->
                         <p class="group-hover-fadeInLeft animation-delay-0 animation-duration-2000">
                              Delay: 0, Duration:2000
                         </p>
                    </div>
                    <!-- End overlay -->
               </div>
               <!-- End group for box -->
          </div>
          <!-- End column for animated box -->

          More boxes ...
          
     </div>
     <!-- End row for boxes -->
</div>
<!-- End container for boxes -->

You can find new website themes & templates developed with Goldman CSS and Goldlight CSS on the link bundle.