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


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>

Updated on: 24-Jun-2020

107 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements