Hoạt ảnh CSS có thể giúp chúng tôi biến đổi các phần tử theo nhiều cách khác nhau bằng cách kết hợp, xoay và dịch.
Các ví dụ sau minh họa cách chúng ta có thể di chuyển một phần tử trong đường tròn.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8%;
width: 35px;
height: 35px;
border-radius: 5px;
background: red;
animation: move 3s infinite linear;
}
@keyframes move {
0% {
transform: rotate(0deg) translateX(40px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(40px) rotate(-360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
