Animation là gì trong css
Bạn đã thực sự nắm rõ CSS Animation ?
Bài đăng này đã không được cập nhật trong 2 năm Show Trong web thì tính mượt mà trong các hiệu ứng là điều vô cùng cần thiết, nó tạo sự thân thiện và thẩm mỹ cho người dùng khiến họ có cảm giác dễ chịu hơn khi truy cập vào website. Để làm được điều này thì bạn cần phải nắm rõ một thuộc tính của CSS đó chính là Animation. 1. Animation là gì?Animation cho phép một thành phần thay đổi từ style này qua style khác. Bạn có thể thay đổi bao nhiều thuộc tính CSS mà bạn muốn, bao nhiều lần mà bạn thích Keyframe rulesHãy xem ví dụ dưới đây
Giờ hãy cùng phân tích câu lệnh trên nhé:
Áp dụng Keyframe rules vào một thành phần:Sau khi tạo ra được 1 keyframe thì chúng ta cần kết nối keyframe này với 1 thành phần như sau:
Animation-name chính là tên animation mà chúng ta đã tạo ở ví dụ trên. Animation-duration biểu thị thời gian mà chúng ta muốn animation này chạy. Nó có thể biểu thị bằng giây(s) hoặc mili giây (ms). 2. Một vài thuộc tính quan trọng của animationAnimation delay
Animation iteration count: số lần chạy animationVới thuộc tính
Cùng xem ví dụ cụ thể cho 2 trường hợp trên nhé: Trước và sau trạng thái của animationThuộc tính
Hãy xem ví dụ dưới đây: Animation launch and pauseVới thuộc tính Animation directionThuộc tính
Điều chỉnh tốc độ chạy của animationThuộc tính 3. Browser supportCSS Animations được hỗ trợ khá tốt trên mọi trình duyệt kể cả IE.
|