CSS giữ giá trị kiểu từ keyframe đầu tiên

Để đặt các phần tử giữ lại các giá trị kiểu được đặt bởi keyframe đầu tiên, hãy sử dụng thuộc tính animation-fill-mode với giá trị backwards.

Ví dụ

<!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>