Tóm Tắt
Giới thiệu chúng
Hiệu ứng (animation) 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à CSS Animation sinh ra để thực hiện điều đó.
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 CSS Animation, mỗi phần mình sẽ đưa ra những demo cụ thể để các bạn nắm được. Let’s go…
Chúng ta có hai khái niệm quan trọng đó là:
- @keyframes: Định nghĩa chuyển động của đối tượng về bản chất nó là các thuộc tính CSS
- Animation Properties: Nó là thuộc tính sẽ gọi đến Keyframes mà bạn đã định nghĩa
Để hiểu hơn chúng ta cùng đi vào ví dụ chi cụ thể sau
Keyframes là nền tảng của CSS animations giúp tạo ra các hiệu ứng, những gì mà chúng ta nhìn thấy.
Thành phần của @keyframes gồm:
Tên của animation: 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
Stages của animation: 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
Thuộc tính CSS: 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
Bây giờ, chúng ta có một @keyframes có tên là “bounceIn” được chia thành các Stages: 0%, 60% và 100%. Trong mỗi stages qui định transform: scale và opacity khác nhau:
@keyframes
bounceIn { 0% {transform
:scale
(0.1);opacity
:0
; } 60% {transform
:scale
(1.2);opacity
:1
; } 100% {transform
:scale
(1); } }
Tiếp theo chúng ta sẽ sử dụng @keyframe bounceIn đã định nghĩa ở trên như sau
div {
animation-duration
: 2s
;
animation-name
: bounceIn;
}
Thuộc tính animation-name là tên của @keyframes được định nghĩa ở trên, cụ thể ở đây là bounceInt
animation-duration: là thời gian chạy animation, đơn vị là giây
Cách dùng ngắn gọn
div {
animation
: bounceIn 2s
;
}
Dưới đây là kết quả
Animation property shorthand
Shorthand là cách viết thuộc tính CSS ngắn gọn, các bạn có thể liên tưởng đến thuộc trính background. Chúng ta có thể viết là background: red; hoặc viết background-color: red; đều được. Animation properties cũng vậy.
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
Viết riêng từng thuộc tính animation thì:
animation-name:value
; animation-duration:value
; animation-timing-function:value
; animation-delay:value
; animation-iteration-count:value
; animation-direction:value
; animation-fill-mode:value
; animation-play-state:value
;
Lưu ý về tiền tố
Cuối năm 2014, rất nhiều trình duyệt dựa trên Webkit vẫn phải sử dụng tiền tố -webkit-… cho animations, keyframes, và transitions. Cho đến khi áp dụng phiên bản tiêu chuẩn, tuy nhiên nếu bạn vẫn muốn sử dụng cả -webkit thì làm như sau:
div {
-webkit-animation-duration
: 2s
;
animation-duration
: 2s
;
-webkit-animation-name
: bounceIn;
animation-name
: bounceIn;
}
Hoặc như thế này
@-webkit
-keyframes
bounceIn { } @keyframes
bounceIn { }
Để 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.
div {
@include
animation
(bounceIn
2
s);
}
@include
keyframes
(bouncein)
{ }
Thuộc tính animation bổ sung
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-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Thuộ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
animation-timing-function: ease-in
-out
;
Sử dụng shorthand
animation: [animation-name] [animation-duration] [animation-timing-function]; animation: bounceIn 2s ease-in-out;
Animation-delay
animation-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 count
Thuộ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-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.4; animation-iteration-count: 2, 0, infinite;
Animation-direction
Thuộ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.
/* Single animation */animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
Animation-fill-mode
Thuộ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
/* Single animation */animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
animation-play-state
Thuộ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
/* Single animation */animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */animation-play-state: paused, running, running;
/* Global values */animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;
Tổng kết
Hy vọng bài viết này giúp các bạn có cái nhìn tổng quan về Animation trong 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.
Thank for reading!
