JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="container">
  <div class="icon-group">
    <svg class="icon-rotate" viewBox="0 0 40 40">
      <g transform="matrix(.35 0 0 .35 3.2 3.2)">
        <path d="M7-6H2.5a2.5 2.5 0 1 0-5 0H-7c-.3 0-.5.2-.5.5s.3.5.5.5H7a.5.5 0 0 0 0-1zm-8.5 0a1.5 1.5 0 0 1 3 0h-3z" transform="matrix(4 0 0 4 48 48)"></path>
      </g>
    </svg>
    <svg class="icon-rotate" viewBox="0 0 40 40">
      <g transform="matrix(.35 0 0 .35 3.2 3.2)">
        <path d="M0 3.5c.3 0 .5-.2.5-.4v-6.2c0-.2-.3-.4-.5-.4-.3 0-.5.2-.5.4v6.2c0 .2.3.4.5.4z" transform="matrix(4 0 0 4 54 52)"></path>
        <path d="M0 3.5c.3 0 .5-.2.5-.4v-6.2c0-.2-.3-.4-.5-.4-.3 0-.5.2-.5.4v6.2c0 .2.3.4.5.4z" transform="matrix(4 0 0 4 42 52)"></path>
        <path d="M5.4-6.5 4.2 4.6c-.1.5-.5.9-1 .9h-6.4a1 1 0 0 1-1-.9L-5.4-6.5h-1l1.3 11.2a2 2 0 0 0 2 1.8h6.3a2 2 0 0 0 2-1.8L6.4-6.5h-1z" transform="matrix(4 0 0 4 48 54)"></path>
      </g>
    </svg>
  </div>
</div>

CSS

.container {
  display: flex;
  align-items: center;
  visibility: visible;
}

.icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 16px;
}

.icon-rotate {
  fill: var(--f);
  width: 28px;
  height: 28px;
  transition: transform 0.3s;
}

.icon-group:hover  .icon-rotate {
  --f: #e81123;
  transform: rotate(360deg);
}

.icon-group:hover .icon-rotate {
  margin-left: 0;
}

@keyframes rotateAnimation {
   0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    22% {
        -webkit-transform: rotate(10deg) translateY(-2.6px);
        transform: rotate(10deg) translateY(-2.6px)
    }

    33% {
        -webkit-transform: rotate(-5deg) translateY(-4px);
        transform: rotate(-5deg) translateY(-4px)
    }

    55% {
        -webkit-transform: rotate(-2deg) translateY(-1.3px);
        transform: rotate(-2deg) translateY(-1.3px)
    }

    88% {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }

    to {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }
}

.icon-group:hover .icon-rotate {
  animation: rotateAnimation 0.62s linear 1;
}

@keyframes flipAnimation {
  0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    33% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    55% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

.icon-group:hover .icon-rotate {
  animation: flipAnimation 0.62s linear 1;
}