With CSS set the element to retain the style values that are set by the last keyframe

CSSWeb DevelopmentFront End Technology

To set the elements to retain the style values set by the first keyframe, use the animation-fill-mode property with the forwards value.


Live Demo

<!DOCTYPE html>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background: red;
            animation-name: myanim;
            animation-duration: 2s;
            animation-fill-mode: forwards;
         @keyframes myanim {
            from {left: 0px; background-color: green;}
            to {left: 200px; background-color: blue;}
Updated on 24-Jun-2020 06:01:36