CSS Animation Cho Người Mới Bắt đầu

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à:

1. @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
2. 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

Building Block #1: Keyframes

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 địnhtransform: 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 { /* styles */ } @keyframes bounceIn { /* styles */ }

Để 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 2s); } @include keyframes(bouncein) { /* styles */}

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

Animation-timing-function

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

/* Keyword value */ animation-iteration-count: infinite; /* <number> values */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* Multiple values */ 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!