Cách Sử Dụng Thuộc Tính Animation-delay Trong CSS để Thiết Lập Thời ...

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
CSS animation-delay Cách sử dụng thuộc tính animation-delay trong CSS để thiết lập thời gian chờ của hiệu ứng chuyển động

Thuộc tính animation-delay trong CSS dùng để thiết lập khoảng thời gian mà một hiệu ứng chuyển động phải chờ đợi trước khi nó được thực thi.

Cách sử dụng thuộc tính animation-delay

Cú pháp:

animation-delay: time | initial | inherit;

Giải thích ý nghĩa các giá trị của thuộc tính animation-delay:

Giá trị Mô tả
time

Chỉ định khoảng thời gian mà một hiệu ứng chuyển động phải chờ đợi để được thực thi

initial

Sử dụng giá trị mặc định của nó

inherit

Kế thừa giá trị thuộc tính animation-delay từ phần tử cha của nó

Ví dụ:

Phần tử div sẽ thực hiện hiệu ứng chuyển động "dich_chuyen" 2 lần

div{ width:100px; height:100px; background-color:black; position:relative; animation-name:dich_chuyen; animation-duration: 3s; animation-iteration-count:2; } @keyframes dich_chuyen { 0% {left:0px;} 100% {left:400px;} } Xem ví dụ Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?

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