CSS giữ giá trị kiểu từ keyframe cuối cùng

Để đặ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ị forwards.

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: forwards;
      }
      @keyframes myanim {
        from {left: 0px; background-color: green;}
        to {left: 200px; background-color: blue;}
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>