Hướng dẫn animation css property - thuộc tính css hoạt hình
Animation được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng phổ biến trong các website hiện nay. Show
Trong bài viết này, Tenten tổng hợp một số ví dụ Animation CSS thú vị mà chúng tôi đã thấy và chỉ cho bạn cách tạo lại chúng. Trong phạm vi của bài viết này, chúng ta cùng tìm hiểu về những khái niệm quan trọng của Animation CSS, mỗi phần mình sẽ đưa ra những demo cụ thể để các bạn nắm được. Let’s go… Contents
Hiệu ứng Animation CSS là gì?#1: Keyframes Cách dùng ngắn gọn #2: Animation property shorthand Lưu ý về tiền tố Sử dụng shorthand
Để tạo một chuyển động Animation CSS, bạn cần phải có các keyframe. Mỗi keyframe sẽ được chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao.
#1: KeyframesCách dùng ngắn gọn #2: Animation property shorthand@keyframes gồm: Lưu ý về tiền tố: Các bạn hiểu đơn giản nó giống như đặt tên function trong Javascript ấy, sau này muốn dùng chỗ nào thì gọi thôi. Ví dụ: bounceIn Sử dụng shorthand: Stages của animation được qui định từ 0% đến 100%. Bạn có thể chia thành nhiều khoảng khác nhau tùy theo ý đồ của chuyển động Animation iteration count: Là những thuộc tính của CSS, được định nghĩa trong mỗi stages, yếu tố quan trọng để tạo nên hiệu ứng Lời kết transform: scale và opacity khác nhau:
Bài viết liên quanbounceInt Hiệu ứng (animation CSS) ngày càng được quan tâm và chú trọng hơn về mặt hình thức và thẩm mỹ trên các trang web ngày nay. Nó làm tăng thêm tính động cho một website. Bên cạnh đó nó cũng đòi hỏi phải đảm bảo được hiệu suất của trang, điều này có nghĩa là việc sử dụng hiệu ứng không không ảnh hưởng đến tốc độ load trang. Và Animation CSS sinh ra để thực hiện điều đó. là thời gian chạy animation, đơn vị là giây Cách dùng ngắn gọndiv {
animation: bounceIn 2s;
} #2: Animation property shorthandLưu ý về tiền tố
Animation iteration count
Lưu ý về tiền tốSử dụng shorthand
Hoặc như thế này
Để dễ ràng hơn nữa thì bạn có thể dùng Bourbon, một mixin của Sass và sử dụng được cho tất cả các trình duyệt web hiện đại.
Ngoài những thuộc tính bắt buộc là animation-name và animation-duration chúng ta có thể sử dụng thêm một số thuộc tính dưới đây.
Animation-timing-functionThuộc tính The animation-timing-function qui định đường cong và tốc độ của hiệu ứng. Bạn có thể định nghĩa timing với các option sau: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit. Giá trị mặc định của timing là ease
Sử dụng shorthand
Animation-delayAnimation-delay cho phép bạn định nghĩa thời gian trễ trước khi hiệu ứng bắt đầu chạy. Animation iteration countThuộc tính animation-iteration-count cho phép quy định số lần lặp đi lặp lại của kiểu ứng trước khi stop Thuộc tính này có 3 kiểu giá trị là: String values, Number values và Multiple values
Animation-directionThuộc tính animation-direction qui định đối tượng khi chuyển động có di chuyển quay lại với bị trí ban đầu mà nó xuất phát hay không và cách quay đầu như thế nào.
Animation-fill-modeThuộc tính này qui định tính chất CSS của một đối tượng animation trước khi sau khi animation đó được thực thi
Animation-play-stateThuộc tính animation-play-state cho phép quy định trạng thái của đối tượng animation với 2 stage chính là runing hoặc paused
Lời kếtHy vọng bài viết này giúp các bạn có cái nhìn tổng quan về Animation CSS và nắm được những thuộc tính Animation cơ bản trong CSS, ở những bài sau chúng ta sẽ tìm hiểu chi tiết hơn. Các tìm kiếm liên quan đến chủ đề “Animation CSS”
Bài viết liên quanCSS Selector được hiểu như thế nào? 5+ loại CSS Selector bạn cần biết 7 thuộc tính display CSS bạn cần biết 3 cách xác định giá trị màu sắc cơ bản bảng màu CSS Thuộc tính keyframe css là gì? 3 yếu tố cấu thành không thể thiếu |