Tweening là quá trình lấp đầy khoảng trống giữa các chuỗi khóa, tức là giữa các keyframes đã được tạo. Keyframes là những frame đại diện cho điểm bắt đầu và điểm kết thúc của hành động hoạt ảnh. Tweening liên quan đến việc tạo keyframe giữa hai hình ảnh để tạo ấn tượng rằng hình ảnh đầu tiên đã di chuyển mượt mà sang hình ảnh thứ hai. Với mục đích này, chúng ta sử dụng các thuộc tính như transforms - matrix, translate, scale, rotate,...
Trong đoạn code bên dưới, ta tạo frame trung gian của các phần tử <p> để chuyển từ đầu đến phía bên trái của trình duyệt.
p {
animation-duration: 2s;
animation-name: slidethrough;
}
@keyframes slidethrough {
from {
margin-left: 100%;
width: 300%;
}
to ...
