Trying to delay the rotate transform effect on hover

I am trying to delay the rotate transform effect on hover. Below is my code

.eael-offcanvas-toggle{
    transition: rotate 500ms;
}

.eael-offcanvas-toggle::after{content: "///"; color: #322625; font-size: 30px;}

.eael-offcanvas-toggle:hover::after{color: #c1252b; transition: 0.1s ease-in !important; content: "|||"; transform: rotate(-0deg);}

.eael-offcanvas-toggle::before{}

But not working. Whats the problem ?

The effect you want to reproduced cannot be achieved using your implementation. Changing the content doesn't animate in CSS.

These are the problems and the changes I suggest you make:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.eael-offcanvas-toggle {
  /* This is not needed */
  transition: rotate 500ms;
}

.eael-offcanvas-toggle::after{
  content: "///";
  color: #322625;
  font-size: 30px;
  /* We need to change the display for the effect to work */
  display: inline-block;
  /* We move the transition function to the original state so that the animation works both ways */
  transition: 0.1s ease-in;
}

.eael-offcanvas-toggle:hover::after{
  color: #c1252b;
  /* We create the intended effect by using skew and rotate */
  transform: rotate(-20deg) skew(0deg, 20deg);
  /* This will add the delay to the transition */
  transition-delay: 300ms;
}

<!-- language: lang-html -->

<div class="eael-offcanvas-toggle"></div>

<!-- end snippet -->