How to stop the animation so that it does not disappear when it is over?

@keyframes men{ from{ background: linear-gradient(120deg, #CFA883 10%, white 20%, white 20%, #CFA883 30%); opacity:0; } to { background-position:300px; opacity:1; } } div{ width:200px; height:100px; border:1px black solid; } div:hover{ animation: men 2s; }

    1 answer 1

    Kmk you in the animation parameter to specified only position and transparency. Accordingly, the gradient itself disappears at the end. You need to leave it (or write something in its place - the final result of the color) and add animation-fill-mode: forwards; in css.

    animation-fill-mode: forwards - the style of the last keyframe is applied to the element at the end of the animation

     @keyframes men { from { background: linear-gradient(120deg, #CFA883 10%, white 20%, white 20%, #CFA883 30%); opacity: 0; } to { background: linear-gradient(120deg, #CFA883 10%, white 20%, white 20%, #CFA883 30%); background-position: 200px; opacity: 1; } } div { width: 200px; height: 100px; border: 1px black solid; } div:hover { animation: men 2s; animation-fill-mode: forwards; } 
     <div></div>