Having a fun hover effect on a link can add a nice touch to your website.

These are a few that I came across and wanted to replicate (in react).

1. Each letter is displayed separately and has its own transition delay, .02 seconds apart, to show a stagger effect. They rotate one after another really quickly and seamlessly. Here, each letter is inside a paragraph element, with display: inline-block.

    ```
    <p>
      <span className="letter" style={{ transitionDelay: ".0s" }}>A</span>
    </p>
    <p>
      <span className="letter" style={{ transitionDelay: ".02s" }}>B</span>
    </p>
    <p>
      <span className="letter" style={{ transitionDelay: ".04s" }}>O</span>
    </p>
    <p>
      <span className="letter" style={{ transitionDelay: ".06s" }}>U</span>
    </p>
    <p>
      <span
        className="letter" style={{ transitionDelay: ".08s" }}>T</span>
    </p>
   

   ```

The cubic-bezier() function

As defined by w3chools.com: "A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The cubic-bezier() function can be used with the animation-timing-function property and the transition-timing-function property. "

We can use this for each letter as well as the 1200ms so that each one happens rapidly:

transition: all 1200ms cubic-bezier(0.2, 1, 0.2, 1)

We can play around with the function for different results.