Câu hỏi phỏng vấn CSS
Câu hỏi

Tweening trong CSS?

Câu trả lời

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.

css Copy
p {
	animation-duration: 2s;
	animation-name: slidethrough;
}

@keyframes slidethrough {
	from {
		margin-left: 100%;
		width: 300%; 
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

Ở đây, phần tử đoạn văn chỉ định rằng quá trình hoạt ảnh sẽ mất 2 giây để thực hiện từ đầu đến cuối. Điều này được thực hiện bằng cách sử dụng thuộc tính animation-duration. Tên hoạt ảnh của @keyframes được xác định bằng cách sử dụng thuộc tính animation-name. Keyframe trung gian được xác định bằng cách sử dụng quy tắc @keyframes.

Trong ví dụ, chúng ta chỉ có 2 keyframe. Keyframe đầu tiên bắt đầu ở 0% và chạy cho đến lề trái 100%, là cạnh ngoài cùng bên phải của phần tử container. Keyframe thứ hai bắt đầu ở 100% trong đó lề trái được đặt là 0% và chiều rộng được đặt là 100%, kết quả là kết thúc hoạt ảnh nghiêng về phía bên trái của container.

expert

expert

Gợi ý câu hỏi phỏng vấn

junior

Marginpadding trong CSS khác nhau thế nào?

middle

Trong CSS, tại sao nên sử dụng import trên đầu tập tin?

middle

File splitting trong CSS là gì?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào