CSS3: transition

Khóa học qua video:

CSS transition, cung cấp một cách để điều khiển tốc độ khi ta thay đổi giá trị cho các thuộc tính CSS. Theo đó, thay vì hiệu ứng thay đổi giá trị thuộc tính CSS một cách tức thì (chẳng hạn như kích thước đang từ 26px lập tức chuyển thành kích thước 40px), thì ta sử dụng transition để thay đổi từ từ theo thời gian mong muốn của ta. Transition có thể áp dụng cho khá nhiều thuộc tính CSS, bạn có thể xem thêm danh sách các thuộc tính hỗ trợ hoạt họa tại ĐÂY.

Chú ý: Bạn cần đặt tiền tố tương ứng với trình duyệt nếu transition không hoạt động một cách bình thường trên trình duyệt đó. Xin nhắc lại các tiền tố -webkit- dành cho Chrome và Safari, -moz- dành cho Mozila FireFox, -o- dành cho trình duyệt Opera và -ms- dành cho trình duyệt IE.

transition thường được thực thi khi người dùng chạm chuột vào phần tử tương ứng (bộ_chon:hover).

Cú pháp tổng quát của thuộc tính transition

bộ_chọn { transition: <property1> <duration1> <timing-function1> <delay1>,<property2> <duration2> <timing-function2> <delay2>,...;
}

bộ_chọn:hover { <property1> : value1; <property2> : value2;
...
}

, trong đó:

- property: tên của thuộc tính CSS, nó tương ứng với thuộc tính con transition-property

- duration: thời gian thực hiện transition, nó tương ứng với thuộc tính con transition-duration

- timing-function: dạng hiển thị transition, nó tương ứng với thuộc tính con transition-timing-function. Các giá trị hay dùng của thuộc tính này là:

ease : bắt đầu chậm, nhanh dần, rồi kết thúc chậm. Đây là giá trị mặc định.
linear : tốc độ thực thi không đổi.
ease-in : bắt đầu chậm.
ease-out : kết thúc chậm
ease-in-out : bắt đầu và kết thúc chậm
cubic-bezier(a,b,c,d) : cho phép ta tùy chỉnh dạng hiển thị với 4 tham số a, b, c, d.

- delay: thời gian transition phải chờ để bắt đầu thực hiện, nó tương ứng với thuộc tính con transition-delay

Đoạn mã 1 dưới đây trình bày một ví dụ về cách sử dụng transition theo cú pháp trên.

Đoạn mã 1:

#box {  
  transition: font-size 2s linear 1s;
  font-size: 26px;
  color: red;
}

#box:hover{  
  font-size: 40px;
}

Phân tích ví dụ: transition trên áp dụng cho thuộc tính font-size của đối tượng có id="box", thời gian thực thi là 2s, nghĩa là cỡ chữ thay đổi từ 26px thành 40px trong thời gian 2s, dạng hiển thị của transition là linear, và độ trễ của transition là 1s, nghĩa là phải chờ 1s thì transition mới bắt đầu. Khi rời chuột khỏi đối tượng thì transition lại lặp lại hoạt động cũ nhưng cỡ chữ lúc này sẽ giảm từ 40px về giá trị cũ là 26px.

Đoạn mã 2 sẽ trình bày cách áp dụng transition cho nhiều thuộc tính CSS.

Đoạn mã 2:

.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);
}

Phân tích đoạn mã: transition ở đoạn mã trên áp dụng cho 4 thuộc tính CSS là width, height, background-color và transform (xem thêm về transform 2D và transform 3D). Tất cả các thuộc tính này đều có thời gian thực hiện transition là 2s. Bạn có thể thay đổi thời gian thực hiện khác nhau cho các thuộc tính CSS, không có timing-function, nghĩa là giá trị mặc định cho thuộc tính này là ease, không có delay, nghĩa là transition được thực hiện ngay khi người dùng chạm vào đối tượng có class="box".

Cú pháp chi tiết cho transition

bộ_chọn { transition-property: <property_name1>, <property_name2>,...; transition-duration: <duration1>, <duration2>, ...;
transition-time-function: <time_function1>, <time_function2>, ...; transition-delay: <delay1>, <delay2>, ...; }

bộ_chọn:hover { <property_name1>; <property_name2>; ...
}

Đoạn mã 3 sau cập nhật từ đoạn mã 1, trong đó sẽ áp dụng transition cho thuộc tính font-size trong 2s với độ trễ 1s. transition được thực thi khi người dùng cham chuột vào phần tử có id="delay1":

Đoạn mã 3:

#delay1 {
  transition-property: font-size;
  transition-duration: 2s;
  transition-time-function: linear;
  transition-delay: 1s;
  font-size: 26px;
}

#delay1:hover {
  font-size: 40px;
}

Đoạn mã 4 cập nhật từ đoạn mã 2, trong đó sử dụng cú pháp trên.

Đoạn mã 4:

.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  -webkit-transition-property: width, height, background-color, -webkit-transform;
  -webkit-transition-duration: 2s, 4s, 2s, 2s;
  transition-property: width 2s, height 2s, background-color 2s, transform 2s;
  transition-duration: 2s, 4s, 2s, 2s;
}
.box:hover {
  background-color: #FFCCCC;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

Khi số lượng giá trị khác nhau

Nếu như số lượng giá trị của thuộc tính con transition-duration ít hơn so với thuộc tính transition-property, thì các giá trị của nó sẽ tự động được lặp lại cho đủ. Ví dụ:

div {

  transition-property: opacity, left, top, height;

  transition-duration: 3s, 5s;

}

thì các giá trị của transtion-duration sẽ được lặp lại như sau:

div {

  transition-property: opacity, left, top, height;

  transition-duration: 3s, 5s, 3s, 5s;

}

Ngược lại, nếu số lượng giá trị của transition-duration lại nhiều hơn so với transition-property, thì các giá trị sẽ được tự động lược bớt. Ví dụ:

div {

  transition-property: opacity, left;

  transition-duration: 3s, 5s, 2s, 1s;

}

thì sau khi lược bớt ta được như sau:

div {

  transition-property: opacity, left;

  transition-duration: 3s, 5s;

}

Các thuộc tính CSS dùng để định nghĩa transition

Các thuộc tính transition được điều khiển bằng cách sử dụng thuộc tính cha transition. Đây là cách tốt nhất để cấu hình cho các transition, tránh được sự dài dòng khi phải cấu hình trên từng transition con, đồng thời giảm được thời gian debug CSS. Dưới đây là các thuộc tính con của transition.

transition-property:

Xác định tên của những thuộc tính CSS ta muốn thiết lập transition.

transition-duration:

Xác định thời gian thực hiện transition cho các thuộc tính CSS. Dưới đây là những ví dụ trực quan:

transition-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s

transition-timing-function:

Xác định dạng hiển thị cho transition. Có khá nhiều dạng hiển thị dành cho transition, một số trong đó được trình bày tại phần Cú pháp tổng quát của transition. Dưới đây là mình họa trực quan cho một số dạng hiển thị này.

transition-timing-function: ease

transition-timing-function: linear

transition-timing-function: step-end

transition-timing-function: steps(4, end)

transition-delay:

Định nghĩa độ trễ của transition, theo đó transition sẽ bắt đầu được thực hiện sau khoảng thời gian trễ này. Dưới đây là demo trực quan:

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

Xác định sự kết thúc của transition

Ta sử dụng sự kiện transitionend để xác định sự kết thúc của trasition. Đối với các trình duyệt WebKit thì ta sử dụng webkitTransitionEnd. transitionend bao gồm hai thuộc tính:

propertyName: Là một chuỗi chỉ ra tên của thuộc tính CSS đã kết thúc transition.

elapsedTime: Một số thực để chỉ ra số giây (second) mà transition đã thực hiện từ lúc bắt đầu cho đến khi kết thúc. Giá trị này không ảnh hưởng đến transition-delay.

Ta có thể sử dụng phương thức element.addEventListener() để tính toán cho sự kiện transitionend. Ví dụ:

el.addEventListener("transitionend", updateTransition, true);

Áp dụng transition để tạo menu

Đoạn mã 5 dưới đây sẽ áp dụng transition để tạo menu nổi bật.

Đoạn mã 5:

Phần HTML:

<div class="top_bar">
  <a class="menuButton" href="#">HTML5</a>
  <a class="menuButton" href="#">CSS3</a>
  <a class="menuButton" href="#">JavaScript</a>
  <a class="menuButton" href="#">jQuery</a>
</div>

Phần CSS:

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

Nếu đoạn mã trên không thực hiện được trên trình duyệt nào đó, bạn sử dụng tiền tố tương ứng với trình duyệt đó.

Transition với JavaScript

Transition hỗ trợ cho lập trình viên khá nhiều trong việc giảm lượng code phải lập trình JavaScript (JS) để tạo hiệu ứng.

Đoạn mã 6 dưới đây thể hiện việc áp dụng transition vào JS nhằm mục đích cho quả bóng di chuyển theo con trỏ chuột.

Đoạn mã 6:

Phần HTML:

<p>Di chuyển chuột đến vị trí bất kỳ, quả bóng sẽ di chuyển tới đó.</p> <section id="foo"></section>

Phần JavaScript:

var f = document.getElementById('foo');
document.addEventListener('mousemove', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
},false);

Phần CSS::

p {
  padding-left: 60px;
  color: green;
}

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

Nguồn: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

» Tiếp: columns

« Trước: box-sizing

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên