Save completed css animation in class

Question

Hi I have a css animation for a link hover, and I'd like to be able to save the completed state of the animation in a css class and add it to the link on click

.link {
    cursor: pointer;
    position: relative;
    white-space: nowrap;

}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
}


.link--elara {
    font-family: aktiv-grotesk-extended, sans-serif;
    font-size: 1.375rem;
}

.link--elara::before {
    transform-origin: 50% 100%;
    transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}

.link--elara:hover::before {
    transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}

.link--elara span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.link--elara:hover span {
    transform: translate3d(0, -2px, 0);
}

I've tried other solutions such as animation-fill-mode: forwards; and other solutions here but I haven't had any luck..

I'd really appreciate any help. Thanks!

Answer 1

The code below works probably the way you want, but it is not "saving the completed animation in a class".

Rather, it adds a class clicked to the button upon clicking. This class has the finished tranlation that also happens on hover and takes over when the cursor exits the element.

 $(document).ready(function(){ $(".link--elara").click(function(e){ $(".link--elara").addClass("clicked"); }); });

 .link { cursor: pointer; position: relative; white-space: nowrap; }.link::before, .link::after { position: absolute; width: 100%; height: 1px; background: currentColor; top: 100%; left: 0; pointer-events: none; }.link::before { content: ''; }.link--elara { font-family: aktiv-grotesk-extended, sans-serif; font-size: 1.375rem; }.link--elara::before { transform-origin: 50% 100%; transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1); clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%); }.link--elara:hover::before, .clicked::before { transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1); clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%); }.link--elara span { display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1); }.link--elara:hover span, .clicked span { transform: translate3d(0, -2px, 0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link"> <div class="link--elara"> <span>Click me!</span> </div> </div>