SVG on hover not taking Transition

Question

I am trying to animate a SVG where I need to change path of the svg. While I am hovering svg at that time path changes but the Transition on hover not working. I need to make a smooth transition on hover.

 .btn { width: 200px; height: 48px; text-align: center; background-color: red; display: block; padding: 40px 20px; transition: all 0.5s } svg path { transition: d 0.8s; transition: all 0.5s }.btn:hover svg #ab { d: path("M11.5 1C11.5 0.723858 11.2761 0.5 11 0.5C10.7239 0.5 10.5 0.723858 10.5 1V10.5H1C0.723858 10.5 0.5 10.7239 0.5 11C0.5 11.2761 0.723858 11.5 1 11.5H10.5V21C10.5 21.2761 10.7239 21.5 11 21.5C11.2761 21.5 11.5 21.2761 11.5 21V11.5H21C21.2761 11.5 21.5 11.2761 21.5 11C21.5 10.7239 21.2761 10.5 21 10.5H11.5V1Z"); d: "M11.5 1C11.5 0.723858 11.2761 0.5 11 0.5C10.7239 0.5 10.5 0.723858 10.5 1V10.5H1C0.723858 10.5 0.5 10.7239 0.5 11C0.5 11.2761 0.723858 11.5 1 11.5H10.5V21C10.5 21.2761 10.7239 21.5 11 21.5C11.2761 21.5 11.5 21.2761 11.5 21V11.5H21C21.2761 11.5 21.5 11.2761 21.5 11C21.5 10.7239 21.2761 10.5 21 10.5H11.5V1Z"; }

 <a href="#" class="btn"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" id="svg-ax"> <g class="main-arrow"> <path class="arrow-changes" id="ab" fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 0.646447C11.1583 0.451184 10.8417 0.451184 10.6464 0.646447C10.4512 0.841709 10.4512 1.15829 10.6464 1.35355L19.7929 10.5H1C0.723858 10.5 0.5 10.7239 0.5 11C0.5 11.2761 0.723858 11.5 1 11.5H19.7929L10.6464 20.6464C10.4512 20.8417 10.4512 21.1583 10.6464 21.3536C10.8417 21.5488 11.1583 21.5488 11.3536 21.3536L21.3536 11.3536L21.7071 11L21.3536 10.6464L11.3536 0.646447Z" fill="black" /> </g> </svg> </a>

I am giving codepen link where I write code. https://codepen.io/bhavik1996/pen/oNzmBjR

Answer 1

I find this animation answer with the @keyframs

<style>
    .btn {
        width: 200px;
        height: 48px;
        text-align: center;
        background-color: red;
        display: block;
        padding: 40px 20px;
        transition: all 0.5s
    }

    .btn:hover .arrow {
        animation: fram 0.2s ease alternate;
    }

    @keyframes fram {
        0% {
            d: path("M11 1L21 11L11 21");
        }

        25% {
            d: path("M11 1L19 11L11 21");
        }

        50% {
            d: path("M11 1L16.5 11L11 21");
        }

        75% {
            d: path("M11 1L14 11L11 21");
        }

        100% {
            d: path("M11 1V11V21");
        }
    }
</style>

 <a href="#" class="btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" id="svg-ax">
        <path class="hori" d="M1 11H21" stroke="black" stroke-linecap="round" />
        <path class="arrow" d="M11 1L21 11L11 21" stroke="black" stroke-linecap="round" />
    </svg>
</a>

Answer 2

The issue with your animation is that your SVG has a different number of points on the CSS to what it does in the HTML.

<path class="arrow-changes" id="ab" fill-rule="evenodd" clip-rule="evenodd"
                    d="M31.181,8.504l28.56,22.677l-28.56,22.677"
                    stroke="black" />

and css:

        .btn:hover svg path  {
            d: path("M31.181,8.504l0.72,22.677l-0.72,22.677");

I have done a really simple example on codepen:

https://codepen.io/jaffa80/pen/poEGRBx

For example, to draw the straight line, you normally only need two points, but to animate the straight line, into an arrow, your straight line must also have 3 points.

Simply put, count the commas in both paths. There should be the same number in each.

Hope this makes sense.