path: root/files/vi/web/css/css_transitions/using_css_transitions/index.html

---
title: Sử dụng CSS transitions
slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
---
<p>{{CSSref}}</p>

<p><span class="seoSummary"><strong>CSS transitions</strong> cung cấp một cách để điều khiển tốc độ của hiệu ứng khi thay đổi các thuộc tính của CSS. Thay vì, các thay đổi thuộc tính tạo ra ảnh hưởng ngay lập tức, bạn có thể làm cho các thay đổi này diễn ra trong một khoảng thời gian. Ví dụ, nếu bạn thay đổi màu sắc của một phần tử từ trắng thành đen, thông thường sự thay đổi là tức thời. Với CSS transitions, các thay đổi xảy ra tại những khoảng thời gian, theo một đường cong tăng tốc, có thể tùy chỉnh.</span></p>

<p>Các hình động liên quan đến quá trình chuyển tiếp giữa hai trạng thái thường được gọi là các chuyển tiếp tiềm ẩn (implicit transitions) vì các trạng thái ở giữa trạng thái bắt đầu và kết thúc đã được ngầm định bởi trình duyệt.</p>

<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>

<p>CSS transitions giúp bạn quyết định những thuộc tính nào có hiệu ứng (bằng cách <em>liệt kê chúng</em>), khi nào thì hiệu ứng sẽ bắt đầu (bằng cách thiết lập <em>thời gian trì hoãn - delay</em>), bao lâu thì chuyển đổi sẽ kết thúc (bằng cách thiết lập khoảng <em>thời gian - duration</em>), và cách chuyển đổi diễn ra (bằng cách định nghĩa <em>timing function,</em> ... tuyến tính hoặc nhanh ở lúc bắt đầu, chậm ở lúc kết thúc).</p>

<div class="note"><strong>Chú ý: </strong>các thuộc tính CSS transition có thể được sử dụng mà không cần bất kỳ prefix provider (nhà cung cấp tiền tố nào), nhưng hiện nay, các vender prefix (tiền tố nhà cung cấp) vẫn cần thiết để tương thích với các trình duyệt cũ (ví dụ Firefox 15 và các phiên bản trước đó, Opera 12 và các phiên bản trước đó, WebKit 5.1.10 và các phiên bản trước đó, Chrome 25 và các phiên bản thấp hơn). Một bảng thống kê khả năng tương thích ở phần cuối của trang này sẽ cung cấp nhiều thông tin hơn.</div>

<h2 id="Những_thuộc_tính_CSS_nào_có_thể_tạo_hiệu_ứng">Những thuộc tính CSS nào có thể tạo hiệu ứng?</h2>

<p>Những lập trình viên Web có thể định nghĩa thuộc tính nào có hiệu ứng và theo cách nào. Điều này cho phép tạo ra các chuyển đổi phức tạo. Tuy nhiên, không phải tất cả các thuộc tính đều có thể tạo hiệu ứng, vì vậy bạn cần biết <a href="/en-US/docs/CSS/CSS_animated_properties">danh sách các thuộc tính có thể tạo hiệu ứng</a>.</p>

<div class="note">Chú ý: Danh sách này có thể thay đổi. Bạn cần chú  ý tới điều này.</div>

<p class="note">Ngoài ra giá trị <code>auto</code> là một trường hợp rất phức tạp. Một vài trình duyệt, dựa trên Gecko, triển khai giá trị này khác so với những trình duyệt dựa trên WebKit, ít chặt chẽ hơn. Sử dụng các hiệu ứng với <code>auto</code> có thể dẫn tới những kết quả khác nhau, phụ thuộc vào trình duyệt và phiên bản của nó, vì vậy nên tránh sử dụng giá trị này.</p>

<p class="note">Cũng cần lưu ý khi sử dụng một transition ngay sau khi thêm phần tử tới DOM bằng cách sử dụng <code>.appendChild()</code> hoặc loại bỏ thuộc tính <code>display: none</code> của nó. Điều này xem như trạng thái ban đầu không bao giờ xảy ra và phần tử luôn luôn ở trạng thái kết thúc. Cách dễ nhất để giải quyết vấn đề này là sử dụng <code>window.setTimeout()</code> trước khi thay đổi thuộc tính CSS mà bạn muốn tạo hiệu ứng.</p>

<h3 id="Ví_dụ_nhiều_thuộc_tính_với_hiệu_ứng">Ví dụ nhiều thuộc tính với hiệu ứng</h3>

<h4 id="Nội_dung_HTML">Nội dung HTML</h4>

<pre class="brush: html; highlight:[3]">&lt;body&gt;
    &lt;p&gt;The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.&lt;/p&gt;
    &lt;div class="box"&gt;Sample&lt;/div&gt;
&lt;/body&gt;</pre>

<h4 id="Nội_dung_CSS">Nội dung CSS</h4>

<pre class="brush: css; highlight:[8,9]">.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
</pre>

<p>{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}</p>

<h2 id="Các_thuộc_tính_được_sử_dụng_để_định_nghĩa_các_transition">Các thuộc tính được sử dụng để định nghĩa các transition</h2>

<p>CSS Transitions được điều khiển bằng cách viết tắt thuộc tính {{cssxref("transition")}}. Đây là cách tốt nhất để cấu hình các transition, nó tránh việc có một danh sách dài các tham số, cái có thể gây khó chịu khi phải dành nhiều thời gian để gỡ lỗi.</p>

<p>Bạn có thể điều khiển từng thành phần của transition với các thuộc tính sau:</p>

<p><strong>(Chú ý các vòng lặp vô hạn chỉ dành cho mục đích mục đích minh họa; CSS <code>transitions</code> chỉ thay đổi một thuộc tính từ bắt đầu tới kết thúc. Nếu bạn cần các hiệu ứng như vòng lặp, hãy sử dụng CSS <code><a href="/en-US/docs/">animation</a></code>)</strong></p>

<dl>
 <dt>{{cssxref("transition-property")}}</dt>
 <dd>Chỉ định tên các thuộc tính CSS để áp dụng hiệu ứng. Chỉ các các thuộc tính được liệt kê ở đây có hiệu ứng trong thời gian chuyển đổi; những thay đổi của các thuộc tính khác xảy ra ngay lập tức như thường lệ.</dd>
 <dt>{{cssxref("transition-duration")}}</dt>
 <dd>Chỉ định khoảng thời gian các chuyển tiếp xảy ra. Bạn có thể chỉ định một khoảng thời gian duy nhất áp dụng cho tất cả các thuộc tính, hoặc nhiều giá trị cho mỗi cho phép mỗi thuộc tính chuyển đổi qua các khoảng thời gian khác nhau.</dd>
 <dd>
 <div>
 <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 0.5s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transformv color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div>
 </div>

 <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 1s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform color;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
 </div>

 <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 2s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
 </div>

 <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 4s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 4s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 4s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
 </div>
 </div>
 </dd>
 <dt>{{cssxref("transition-timing-function")}}</dt>
 <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Chỉ định một hàm để định nghĩa cách các giá trị trung gian cho các thuộc tính được tính toán như thế nào. Timing functions xác định cách các giá trị trung gian của chuyển đổi được tính toán. Hầu hết <a href="/en-US/docs/CSS/timing-function">timing function</a> có thể được xác định bằng cách cung cấp các đồ thị tương ứng, như định nghĩa bốn đỉnh của một khối cubic bezier. Bạn cũng có thể chọn easing từ <a href="http://easings.net/">Easing Functions Cheat Sheet.</a></dd>
 <dd>
 <div class="cleared">
 <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: ease</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: ease;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: ease;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
 </div>

 <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: linear</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
 </div>

 <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: step-end</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: step-end;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: step-end;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
 </div>

 <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: steps(4, end)</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: steps(4, end);
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-timing-function: steps(4, end);
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
 </div>
 </div>
 </dd>
 <dt>{{cssxref("transition-delay")}}</dt>
 <dd>Xác định khoảng thời gian trì hoãn giữa thời gian một thuộc tính thay đổi và lúc chuyển tiếp thực sự bắt đầu.</dd>
 <dd>
 <div>
 <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 0.5s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent {
    width: 250px;
    height: 125px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 0.5s;
    transition-timing-function: linear;
}

.box1 {
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position: absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 0.5s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
 </div>

 <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 1s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent {
    width: 250px;
    height: 125px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 1s;
    transition-timing-function: linear;
}

.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 1s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
 </div>

 <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 2s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent {
    width: 250px;
    height: 125px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 2s;
    transition-timing-function: linear;
}

.box1 {
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 2s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
 </div>

 <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 4s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush: css">.parent {
    width: 250px;
    height: 125px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 4s;
    transition-timing-function: ease-in-out;
}

.box1 {
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top: 25px;
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration: 2s;
    transition-delay: 4s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
 </div>
 </div>
 </dd>
</dl>

<p>Cú pháp CSS được viết tắt như sau:</p>

<pre class="brush: css">div {
    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
}</pre>

<h2 id="Phát_hiện_sự_bắt_đầu_và_hoàn_thành_của_quá_trình_chuyển_tiếp">Phát hiện sự bắt đầu và hoàn thành của quá trình chuyển tiếp</h2>

<p>Bạn có thể sử dụng sự kiện {{event("transitionend")}} để phát hiện một hiệu ứng đã kết thúc. Đây là một đối tượng {{domxref("TransitionEvent")}}, trong đó có 2 thuộc tính được thêm vào một đối tượng {{domxref("Event")}} thông thường là:</p>

<dl>
 <dt><code>propertyName</code></dt>
 <dd>Một chuỗi báo hiệu tên thuộc tính CSS đã hoàn thành quá trình chuyển tiếp.</dd>
 <dt><code>elapsedTime</code></dt>
 <dd>Một số thực báo hiệu số giây quá trình chuyển tiếp đã diễn ra tại thời điểm sự kiện xảy ra. Giá trị này không ảnh hưởng tới giá trị của {{cssxref("transition-delay")}}.</dd>
</dl>

<p>Thông thường, bạn có thể sử dụng phương thức {{domxref("EventTarget.addEventListener", "addEventListener()")}} để theo dõi sự kiện này:</p>

<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
</pre>

<p>Để phát hiện quá trình chuyển tiếp bắt đầu sử dụng {{event("transitionrun")}} (xảy ra trước thời gian chờ) và {{event("transitionstart")}} (xảy ra sau thời gian chờ), theo cùng một mẫu:</p>

<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);</pre>

<div class="note"><strong>Chú ý: </strong>Sự kiện transitioned không xảy ra nếu quá trình chuyển tiếp bị hủy bỏ trước khi nó hoàn thành vì phần tử {{cssxref("display")}}<code>: none </code>hoặc giá trị của thuộc tính đã thay đổi.</div>

<h2 id="Khi_danh_sách_thuộc_tính_và_giá_trị_có_độ_dài_khác_nhau">Khi danh sách thuộc tính và giá trị có độ dài khác nhau</h2>

<p>Nếu danh sách giá trị ngắn hơn danh sách thuộc tính, giá trị của nó sẽ được lặp lại để phù hợp. Ví dụ:</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
</pre>

<p>Điều này sẽ tương ứng với:</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}</pre>

<p>Tương tự, nếu danh sách giá trị dài hơn danh sách thuộc tính, nó sẽ bị cắt bớt, như ví dụ dưới đây:</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}</pre>

<p>Sẽ được biên dịch thành:</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}</pre>

<h2 id="Một_ví_dụ_đơn_giản">Một ví dụ đơn giản</h2>

<p>Đây là ví dụ thực hiện quá trình chuyển tiếp font size trong bốn giây với 2 giây trì hoãn giữa thời điểm người dùng di chuyển chuột lên phần tử và khi hiệu ứng bắt đầu:</p>

<pre class="brush: css">#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}
</pre>

<h2 id="Sử_dụng_transitions_khi_highlighting_menus">Sử dụng transitions khi highlighting menus</h2>

<p>Một trường hợp phổ biến là sử dụng CSS làm nổi bật các item trong một menu khi người dùng di chuột lên chúng. Việc sử dụng transition giúp hiệu ứng hấp dẫn hơn.</p>

<p>Trước khi xem code, bạn có thể muốn xem <a href="https://codepen.io/anon/pen/WOEpva">live demo</a> (giả sử trình duyệt của bạn hỗ trợ transitions).</p>

<p>Đầu tiên chúng ta thiết lập menu sử dụng HTML:</p>

<pre class="brush: html">&lt;nav&gt;
  &lt;a href="#"&gt;Home&lt;/a&gt;
  &lt;a href="#"&gt;About&lt;/a&gt;
  &lt;a href="#"&gt;Contact Us&lt;/a&gt;
  &lt;a href="#"&gt;Links&lt;/a&gt;
&lt;/nav&gt;</pre>

<p>Sau đó chúng ta sử dụng CSS để style và tạo hiệu ứng cho menu:</p>

<pre class="brush: css">a {
  color: #fff;
  background-color: #333;
  transition: all 1s ease-out;
}

a:hover,
a:focus {
  color: #333;
  background-color: #fff;
}
</pre>

<p>Đoạn CSS quyết định menu trông như thế nào, với cả màu background và text thay đổi khi phần tử có trạng thái là {{cssxref(":hover")}} và {{cssxref(":focus")}}.</p>

<h2 id="Sử_dụng_transitions_để_làm_cho_tính_năng_JavaScript_mượt_mà">Sử dụng transitions để làm cho tính năng JavaScript mượt mà</h2>

<p>Transitions là một công cụ tuyệt vời để làm mọi thứ trong mượt mà hơn mà không cần phải làm mọi thứ với JavaScript. Hãy xem ví dụ.</p>

<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
&lt;div id="foo"&gt;&lt;/div&gt;
</pre>

<p>Sử dụng JavaScript bạn có thể làm hiệu ứng quả bóng di chuyển tới một vị trí nhất định xảy ra:</p>

<pre class="brush: js">var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
},false);
</pre>

<p>Với CSS bạn có thể làm cho nó diễn ra mượt mà, mà không cần nhiều nỗ lực. Đơn giản thêm một transition tới phần tử và mọi thay đổi sẽ diễn ra mượt mà:</p>

<pre class="brush: css">p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}
</pre>

<p>Bạn có thể thử ở đây: <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a></p>

<h2 id="Các_thông_số_kỹ_thuật">Các thông số kỹ thuật</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '', '')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Khả_năng_tương_thích_với_trình_duyệt">Khả năng tương thích với trình duyệt</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0 {{property_prefix("-webkit")}}<br>
    26.0</td>
   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
    {{CompatGeckoDesktop("16.0")}}</td>
   <td>10</td>
   <td>10.5 {{property_prefix("-o")}}<br>
    12.10</td>
   <td>3.2 {{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td><code>transitionend</code> event</td>
   <td>1.0<sup>[1]</sup><br>
    26.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>10.5<sup>[2]</sup><br>
    12<br>
    12.10</td>
   <td>3.2<sup>[1]</sup><br>
    6.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1</td>
   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
    {{CompatGeckoMobile("16.0")}}</td>
   <td>10</td>
   <td>10 {{property_prefix("-o")}}<br>
    12.10</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td><code>transitionend</code> event</td>
   <td>2.1<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>10</td>
   <td>10<sup>[2]</sup><br>
    12<br>
    12.10</td>
   <td>3.2<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Chrome 1.0, WebKit 3.2 and Android 2.1 implemented this as the non-standard <code>webkitTransitionEnd</code>. Chrome 26.0 and WebKit 6.0 implement the standard <code>transitionend</code>.</p>

<p>[2] Opera 10.5 and Opera Mobile 10 implemented this as <code>oTransitionEnd</code>, version 12 as <code>otransitionend</code> and version 12.10 as the standard <code>transitionend</code>.</p>

<h2 id="Các_bài_liên_quan">Các bài liên quan</h2>

<ul>
 <li>The {{domxref("TransitionEvent")}} interface and the {{event("transitionend")}} event.</li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></li>
</ul>