CODEWITHSUNDEEP
javascripthtmlcsscss-animations
j roc
j roc

Reputation: 238

Save completed css animation in class

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!

Upvotes: 0

Views: 354

Answers (1)

Klaassiek
Klaassiek

Reputation: 2906

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>

Upvotes: 2

Related Questions