AOS.js with Bootstrap-Column with hover-effect

Question

I have the following layout:

Each box is a bootstrap col-sm-4 with the hover-effect transform: scale(1.05) and the transition transition: transform ease-in-out .25s (like the box in the top left corner). Now I want to add a AOS-flip-in-effect data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="3000" data-aos-delay="50". What is a possibility to have different transition-durations for these both transitions?

Answer 1

My result was to add the AOS-flip-effect to the container of the .col-sm-4