Spread Fx
Description: Suppose there are two hidden planes that are going to be shown 1 by 1 when the shared container is hovered. E.g. On hover, flips A (0.7s motion) then B (0.3s motion); On mouseout, transit backward We can do that by specifying transition-delay on two states: /*hover state*/ A:hover { transition-delay:0 }/* A first */ B:hover { transition-delay:0.7s }/* 0.7s for A mo duration */ /*normal state (=mouseout state) */ A { transition-delay:0.3s }/* 0.3s for B mo duration */ B { transition-delay:0s }/* B first */
Browsers: Chrome Edge Firefox Opera Safari
Responsive:Yes
Posted: 3.06.2018