Hiệu ứng Animation trong CSS3

Trong thiết kế giao diện Front-end cho website để đẹp và gây ấn tượng người ta thường sử dụng Animation. Bài viết này giới thiệu về hiệu ứng chuyển động Animation trong CSS3 kết hợp HTML5. Nếu bạn đang muốn tìm hiểu thì đừng bỏ lỡ bài viết này.

Cách sử dụng Animation trong CSS3

Để cho bạn dễ hiểu và không bị rối khi tìm hiểu về Animation thì bạn chỉ cần nhớ:

Tạo hiệu ứng chuyển động cần tới @keyframe.

Cú pháp:

@keyframes Name {

/*code*/

}

Giải thích:

Name: Tên hiệu ứng chuyển động

Code: Đoạn code thực thi

Sử dụng phần trăm từ 0% đến 100%.

from…to: thiết lập giá trị từ khởi đầu (from – tương đương với 0%) đến kết thúc (to – tương đương với 100%).

Các thuộc tính mở rộng:

  • Thuộc tính animation-name
  • Thuộc tính animation-duration
  • Thuộc tính animation-timing-function
  • Thuộc tính animation-delay
  • Thuộc tính animation-iteration-count
  • Thuộc tính aniamtion-direction
  • Thuộc tính animation-fill-mode

Điểu hiểu được chúng ta sẽ đi sâu vào các ví dụ sau:

1. Chuyển động từ trên xuống

Bạn hãy chạy đoạn ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<style>

div {
width: 200px;
height: 200px;
background: green;
position: relative;
animation: move 4s infinite;
}

@keyframes move {
from {top: 0px;}
to {top: 150px;}
}

</style>
</head>
<body>

<h1>Ví dụ về @keyframes</h1>

<div></div>

</body>
</html>

Xem ví dụ

Giải thích:

Qua ví dụ trên bạn sẽ thấy rằng khi thiết lập một @keyframe move nó sẽ di chuyển từ vị trí top là 0 xuống bottom là 150px.

2. Chuyển động đổi màu liên tục

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: green;
position: relative;
animation: move 4s infinite;
}

@keyframes move {
from {top: 0px;}
to {top: 150px;}
}
</style>
</head>
<body>
<h1>Ví dụ về @keyframes</h1>
<div></div>
</body>
</html>

Xem ví dụ

Với ví dụ này màu sắc sẽ được thay đổi liên tục khi chuyển động.

Các thuộc tính mở rộng

1. animation-name

Cú pháp:

animation-name: name;

Ví dụ:

animation: mymove;

2. animation-duration

Cú pháp:

animation-duration: time;

Thời gian chuyển động có thể là s hoặc ms.

3. animation-iteration-count

Cú pháp:

animation-iteration-count: value;

Value là số lần lặp lớn hơn 1

infinite – chạy không giới hạn số lần

Viết gộp 3 thuộc tính mở rộng trên lại thành một như sau:

animation: mymove 5s infinite;

4. animation-delay

Độ trễ của chuyển động được sử dụng bằng animation-delay

Cú pháp:

animation-delay: value;

Xem ví dụ

5. animation-direction

Xác định chiều chạy cho Animation

normal: animation di chuyển bình thường tiến về phía trước (mặc định)
reverse: animation di chuyển theo hướng ngược lại, lui về sau.
alternate: animation di chuyển tiến về trước, sau đó lui theo hướng ngược lại
alternate-reverse: animation di chuyển ngược lại trước, rồi đổi chiều tiến về trước.

6. animation-timing-function

Xác định tốc độ khi chuyển động

ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm dần (giá trị mặc định).
linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
ease-in: tạo hiệu ứng chuyển đổi chậm lúc bắt đầu.
ease-out: tạo hiệu ứng chuyển đổi chậm lúc kết thúc.
ease-in-out: tạo hiệu ứng chuyển đổi chậm cả lúc bắt đầu và kết thúc.cubic-bezier(n,n,n,n): cho phép bạn xác định một giá trị của riêng mình theo hàm bezier

Xem ví dụ

Gộp chung các thuộc tính

Ví dụ:

div {
animation-name: mymove;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Cú pháp viết gộp:

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode;

Ví dụ:

div {
animation: mymove 5s linear 2s infinite alternate;
}

Qua bài viết này chúng ta đã cùng tìm hiểu về hiệu ứng Animation tạo chuyển động trong CSS3.

Trong bài này kiến thức quan trọng cần phải ghi nhớ đó là hiểu được quy tắc viết @keyframe và các thuộc tính animation mở rộng.