Để tạo hoạt ảnh khung hình chính trong CSS3, hãy xác định khung hình chính riêng lẻ. Khung hình chính sẽ kiểm soát các bước hoạt ảnh trung gian trong CSS3.
Sau đây là mã để xác định các khung chính trong CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: colorChange 5s infinite;
}
@keyframes colorChange {
from {
background: red;
left: 0px;
}
to {
background: rgb(32, 229, 255);
left: 300px;
}
}
</style>
</head>
<body>
<h1>Defining keyframes in CSS</h1>
<div></div>
<h2>The above square will change its color and position with time</h2>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Sau 5s, vị trí và màu sắc sẽ thay đổi như sau -
