Cách Tạo Hiệu ứng Chuyển động Cho Phần Tử HTML - Web Cơ Bản

Trang chủ » Hiệu ứng Animation Css » Cách Tạo Hiệu ứng Chuyển động Cho Phần Tử HTML - Web Cơ Bản

Có thể bạn quan tâm

Ví dụ:

- Tôi có một đoạn mã như bên dưới.

<!DOCTYPE html> <html> <head> <title>Tiêu đề của trang web</title> <style type="text/css"> #test{ background-color:green; width:100px; height:100px; position:relative; left:0px; } </style> </head> <body> <div id="test"></div> </body> </html>

- Màn hình trình duyệt sẽ hiển thị là.

- Bây giờ, tôi muốn tạo hiệu ứng chuyển động cho phần tử #test.

(tôi muốn nó di chuyển sang bên phải 500px rồi trở về vị trí cũ, tiếp tục lặp lại hành động này)

- Để làm được điều đó thì trước tiên tôi tạo một cái @keyframes có tên là move_right, nó sẽ cung cấp cho trình duyệt các thông tin như:

  • Ở thời điểm 0% (khi hiệu ứng chuyển động chưa diễn ra) phần tử sẽ nằm ở vị trí left 0px.
  • Ở thời điểm 100% (khi hiệu ứng chuyển động đã kết thúc) phần tử sẽ nằm ở vị trí left 500px.
@keyframes move_right{ 0%{ left:0px; } 100%{ left:500px; } }

- Sau khi đã xây dựng xong cái @keyframes, tôi sẽ sử dụng các thuộc tính animation để áp dụng cái @keyframes đó lên phần tử.

- Trong trường hợp này thì tôi sử dụng ba thuộc tính:

  • Thuộc tính animation-name dùng để xác định tên của cái @keyframes mà tôi muốn áp dụng lên phần tử.
  • Thuộc tính animation-duration dùng để xác định "thời lượng" của một chu kỳ hiệu ứng chuyển động (tôi thiết lập 3 giây)
  • Thuộc tính animation-iteration-count dùng để xác định "số lần lặp lại" một chu kỳ hiệu ứng chuyển động (tôi thiết lập giá trị infinite có nghĩa là không giới hạn số lần lặp lại)
animation-name:move_right; animation-duration:3s; animation-iteration-count:infinite; Xem ví dụ

Từ khóa » Hiệu ứng Animation Css