# Tạo chuyển động với transition

Một trong các kỹ thuật phổ biến ở các website hiện đại là có các hiệu ứng chuyển động cho từng đối tượng rất đẹp mắt được làm hoàn toàn bằng CSS3, khi mà trước đây đa phần các hiệu ứng chuyển động phải cần có sự trợ giúp của Javascript. Trong CSS3 có thuộc tính `transition` giúp bạn tạo ra các hiệu ứng chuyển động của một đối tượng tron website dễ dàng mà không cần phải dùng thêm Javascript.

Cấu trúc khai báo `transition` như sau:

```
transition: [thuộc tính chuyển động] [thời gian chuyển động] [thời gian delay] [kiểu chuyển động];
```

Lưu ý rằng transition là thuộc tính CSS3 nên bạn cần nên khai báo thêm hai thuộc tính tương tự kèm hai tiền tố `-moz-` và `-webkit-` để nó hoạt động tốt trên mọi trình duyệt. Ví dụ:

```css
#box {
  transition: margin-left 2s 0.5s ease-in-out;
  -moz-transition: margin-left 2s 0.5s ease-in-out;
  -webkit-transition: margin-left 2s 0.5s ease-in-out;
}
```

Trong đó, `margin-left` là thuộc tính mà bạn cần nó sẽ kích hoạt chuyển động nhưng không phải thuộc tính nào cũng có thể chuyển động mà nó chỉ có tác dụng với các hiệu ứng trong [danh sách này](https://www.w3.org/TR/css3-transitions/#animatable-properties), bạn có thể sửa thành `all` để nó áp dụng lên toàn bộ thuộc tính, `2s` là thời gian diễn ra sự chuyển động và `0.5s` là thời gian trễ khi sự kiện bắt đầu, `ease-in-out` là kiểu chuyển động nhanh ở lúc bắt đầu và chậm ở lúc kết thúc. Phần kiểu chuyển động bạn có thể không cần khai báo, hãy xem thêm các kiểu chuyển động [tại đây](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function).

Bây giờ bạn đã khai báo cho `#box` áp dụng hiệu ứng chuyển động rồi, nhưng để vậy nó sẽ không chuyển động mà sẽ bắt buộc có thêm một sự kiện xảy ra để nó kích hoạt. Ví dụ mình sẽ viết thêm CSS với pseudo-class là `:hover` để tiến hành sửa giá trị `margin-right` và lúc này nó sẽ chuyển động dựa theo giá trị mới.

```css
#box:hover {
  margin-left: 150px;
}
```

Bạn xem ví dụ live ở dưới.

{% embed url="<https://codepen.io/huykira/pen/GRxdbRe>" %}

Tóm lại khi tạo hiệu ứng chuyển động là bạn phải đặt thuộc tính `transition` vào phần tử muốn làm chuyển động, và nhớ khai báo thuộc tính chuyển động. Sau đó bạn phải thiết lập thêm sự kiện chuyển động thông qua các pseudo class hoặc thậm chí là Javascript nếu bạn biết ngôn ngữ này.

Ngoài ra, bạn còn có thể thiết lập chuyển động cho nhiều thuộc tính khác nhau bằng cách thêm dấu phẩy như dưới đây.

```
#box {
  transition: margin-left 2s, background-color 1s;
  -moz-transition: margin-left 2s, background-color 1s;
  -webkit-transition: margin-left 2s, background-color 1s;
}
```

Ví dụ thực tế:

{% embed url="<https://codepen.io/huykira/pen/abYGgzV>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jks.gitbook.io/tai-lieu-wordpress/chuong-2-frontend-co-ban/kien-thuc-css/tao-chuyen-dong-voi-transition.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.