Để 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à cách tạo hoạt ảnh khung hình chính bằng CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(218, 78, 36);
border: 4px solid rgb(0, 0, 0);
position: relative;
animation: circleMove 5s infinite;
}
@keyframes circleMove {
from {
left: 0px;
border-radius: 0px;
}
to {
left: 200px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Sau một thời gian, hình vuông sẽ chuyển thành hình tròn như hình -
