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.

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         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;}
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
raja
Published on 16-May-2018 13:34:58
Advertisements