With CSS set the element to retain the style values that is set by the first keyframe

CSSWeb DevelopmentFront End Technology

To set the elements to retain the style values set by the last keyframe, use the animation-fill-mode property with the backwards 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: backwards;
         }
         @keyframes myanim {
            from {left: 0px; background-color: green;}
            to {left: 200px; background-color: blue;}
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>
raja
Updated on 23-Jun-2020 15:23:03

Advertisements