CSS Transition – Tạo hiệu ứng chuyển động cơ bản

Transition là gì?

Transition (CSS Transition) là một thuộc tính nằm trong CSS3 nhằm tạo hiệu ứng chuyển động đẹp mắt cho các website hiện đại làm tăng tính thẩm mỹ và gây lôi cuốn với người dùng. Cách này dễ dàng hơn so với việc trước đây phải dùng JavaScript để thực hiện nhằm rút gọn thao tác và để đề phòng trường hợp người dùng dở chứng “tắt javascript”. Bây giờ chúng ta sẽ cùng tìm hiểu xem nó hoạt động như thế nào?

Cơ bản về CSS Transition

Ví dụ

Đầu tiên, hãy tạo ra một ô vuông màu xanh có kích thước 100x100px, và khi rê chuột vào ô vuông này (mouse hover), nó sẽ chuyển thành màu đỏ.

.box {   
    background-color: #007bb6;   
    awidth: 100px;
    height: 100px;
} 
.box:hover {
    background-color: rgb(216, 51, 51);
} 

Kết quả liền tay như thế này đây:

Bây giờ, chúng ta sẽ thực hành tạo hiệu ứng màu chuyển dần dần từ xanh sang đỏ trong 1s khi rê chuột vào. Như đã giới thiệu qua, chúng ta sẽ thêm tý gia vị transition vào mã nguồn như sau:

.box:hover {
    background-color: rgb(216, 51, 51);
    transition-property: background;
    transition-duration: 1s;
} 

Các bạn sẽ được kết quả như sau, thử rê chuột vào để thấy rõ sự hoạt động của nó:

Ý nghĩa của hai thuộc tính transition-property và transition-duration

Như các bạn thấy ta sẽ có hai thuộc tính transition-property và transition-duration trong ví dụ trên. Và đây là ý nghĩa của chúng:

• transition-property tức là hiệu ứng của quá trình chuyển đổi sẽ ảnh hưởng lên cái gì. Như ở đây ta muốn là ảnh hưởng lên background. Ngoài ra còn có giá trị khác như awidth, height, border, border-radius,… Các bạn đang hỏi vì sao tôi biết ư, không phải đâu. Tất cả các transition-property này đều nằm ở trang web animatable này. Các bạn có thể vào thử và xem các hiệu ứng bắt mắt trước khi “ngâm cứu” tiếp nhé.
• transition-duration mang ý nghĩa thời gian hiệu ứng xảy ra hay gọi chính xác là quá trình chuyển đổi. Nó có giá trị s hoặc ms tức là giây hoặc mili giây. Như ở đây ta muốn nó chuyển đổi trong 1s. Còn các bạn muốn ít hơn nữa à? Như 300ms chẳng hạn? Thế thì ghi là .3s hoặc 300ms. Tương tự với .4s, .6s hay .8s hoặc 400ms, 600ms hay 800ms gì gì đó cũng được, cái đó là tùy ở các bạn.

Nhiều hiệu ứng trong một sự kiện

Ví dụ

Từ kết quả của ví dụ trên, tôi lại có một ý tưởng nữa là làm cho nó chuyển màu và biến thành hình tròn luôn. Vậy chúng ta sẽ chỉnh sửa lại đôi chút như sau

.box:hover {
    border-radius: 50%;
    background-color: rgb(216, 51, 51);
    transition-property: background, border-radius;
    transition-duration: 1s;
} 

Cái chúng ta có sẽ là:

Thật ra đối với transition-duration ở đây có thể nhận nhiều giá trị thời gian tương ứng với giá trị của transition-property ở trên, đặt thí dụ bạn muốn màu nền thì chuyển trong 1s nhưng thành hình tròn phải trong .3s tức 300ms thôi, nếu bạn không điền thời gian tương ứng cho giá trị thứ hai tức border-radius, mặc định nó sẽ lấy giá trị 1s kia làm thừa số chung cho tất cả các hiệu ứng. Vậy ta phải viết lại CSS như sau:

.box:hover {
    border-radius: 50%;
    background-color: rgb(216, 51, 51);
    transition-property: background, border-radius;
    transition-duration: 1s, .3s;
} 

Sử dụng giá trị all để áp dụng cho tất cả chuyển động

Tuy nhiên nếu không thích dài dòng văn tự vì chỉ cần tinh ý một chút xíu thì các bạn sẽ thấy nếu có nhiều hơn 2 chuyển động trở lên, các bạn sẽ phải “mệt” vì ngồi viết cho đúng tên chuyển động và đâm ra hoảng nếu suy nghĩ thời gian cho từng chuyển động đó nữa. Cách duy nhất giúp bạn thoát khỏi mớ hỗ tạp này là dùng giá trị all tức là áp dụng cho tất cả các chuyển động và suy nghĩ một mức thời gian hợp lý cho nó, .3s có thể là một con số đẹp, tôi nghĩ vậy vì tôi thường dùng nó cho các hiệu ứng trong dự án của mình. Viết ngắn lại CSS xem nào:

.box:hover {
    border-radius: 50%;
    background-color: rgb(216, 51, 51);
    transition-property: all;
    transition-duration: .3s;
} 

Kết quả vẫn như nhau thôi:

Thế nhưng, hiệu ứng này vẫn còn thiếu thiếu chỗ nào đó.

Tạo chuyển động mượt mà từ trong ra ngoài

Thật vậy, nếu để ý kỹ nữa, các bạn có thấy mấy cái hiệu ứng nãy giờ ta viết nó chỉ áp dụng khi rê chuột vào (mouse-in) chứ mình mà rê chuột ra (mouse-out) thì độ “mượt mà” tự dưng biến mất hay không?

Điều này khá dễ hiểu. Vì ngay từ đầu, ta chỉ viết mã CSS cho hiệu ứng rê chuột vào, chứ đâu có viết mã cho rê chuột ra. Nhưng các bạn đừng có nghĩ chi cho sâu xa nhé, đơn giản ta chỉ cần copy phần transition kia bỏ vào .box là được. Như kiểu từ khi mới tạo ra, .box này đã được định sẵn những hiệu ứng mượt mà. Nhớ viết một chỗ và xóa chỗ còn lại:

Kết quả cũng đâu có khác gì đâu đúng không? Vả lại trông cũng rất “ảo diệu” là đằng khác nữa. Vậy cơ bản là từ giờ thỏa sức tung hoành nhé.

Kết luận

Vậy là qua việc tìm hiểu về CSS Transition, các bạn lại biết thêm một cách để trang trí cho website mình trông thật lung linh và lấp lánh. Các bạn có thể tự thực hành thêm các phần như awidth, height, font-size,… để thấy được sự ảo diệu của nó hoặc truy cập vào animatable để có cái nhìn tổng quan hơn về Transition. Tuy nhiên, một lưu ý nhỏ dành cho các bạn beginner là đừng quá lạm dụng các hiệu ứng nhé, nhiều quá đôi khi lại không tốt và sẽ có một số khách hàng lại “vùi dập” chúng ta nữa. Hãy tự mình khám phá thêm và ứng dụng nó thật hiệu quả nhé các bạn.