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


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>

Updated on: 23-Jun-2020

71 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements