Ngày 23/5/2001 W3C đã giới thiệu CSS3 tới cộng đồng người phát triển web, trong những năm đầu đang phát triển CSS3 nó vẫn còn mới lạ đối với người phát triển web, mãi cho tới thời điểm những năm 2007 đến 2010 và thời điểm hiện tại thì CSS3 đã thật sự tạo nên một sức hút lớn với những tính năng mạnh mẽ của nó. Hôm nay mình sẽ giới thiệu tới các bạn một tính năng vượt trội của nó là CSS3 Library Animation.

CSS3 Library Animation là bộ thư viện bao gồm những hiệu ứng đặc biệt của CSS3 do những người phát triển web tạo nên, thời điểm trước đó mình muốn tạo ra những hiệu ứng đặc biệt cho trang web thì cần phải dùng tới Jquery, javascript, Flash … Với sự ra đời của tính năng Animation trong CSS3 thì điều này thật đơn giãn và giúp chúng ta tiết kiệm được thời gian, công sức rất nhiều ^^.

Toàn bộ mã nguồn và thư viện Animation được đính kèm trong tập tin dowload. Do bộ thư viện này và mã nguồn rất lớn nên mình sẽ không post lên trên này để tránh bài viết dài dòng. Mình sẽ hướng dẫn các bạn cách gọi từng function CSS3 trong bộ thư viện này ra để sử dụng.

CSS3 Library Animation gồm có 53 hiệu ứng đặc biệt và sau đây là danh sách các hiệu ứng trong bộ thư viện này.

• Hinge Effects
• Flash Effects
• Shakes Effects
• Bounce Effects
• Tada Effects
• Swing Effects
• Wobble Effects
• Pulse Effects
• Flip Effects
• FlipInX Effects
• FlipOutX Effects
• flipInY Effects
• flipOutY Effects
• fadeIn Effects
• fadeInUp Effects
• fadeInDown Effects
• fadeInLeft Effects
• fadeInRight Effects
• fadeInUpBig Effects
• fadeInDownBig Effects
• fadeInLeftBig Effects
• fadeInRightBig Effects
• fadeOut Effects
• fadeOutUp Effects
• fadeOutDown Effects
• fadeOutLeft Effects
• fadeOutRight Effects
• fadeOutUpBig Effects
• fadeOutDownBig Effects
• fadeOutLeftBig Effects
• fadeOutRightBig Effects
• bounceIn Effects
• bounceInUp Effects
• bounceInDown Effects
• bounceInLeft Effects
• bounceInRight Effects
• bounceOut Effects
• bounceOutUp Effects
• bounceOutDown Effects
• bounceOutLeft Effects
• bounceOutRight Effects
• rotateIn Effects
• rotateInUpLeft Effects
• rotateInDownLeft Effects
• rotateInUpRight Effects
• rotateInDownRight Effects
• rotateOut Effects
• rotateOutUpLeft Effects
• rotateOutDownLeft Effects
• rotateOutUpRight Effects
• rotateOutDownRight Effects
• rollIn Effects
• rollOut Effects

Một function Flash trong file animate.css như sau:

@-webkit-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@-ms-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

Ở bài trước mình đã nói sơ qua về cách thức khai báo và hoạt động của các function này bây giờ mình sẽ nói lại nhé.

@keyframes /* Khởi tạo một function trong CSS3 */

@keyframes flash /* Khởi tạo một function với tên là flash */

@-webkit-keyframes flash /* Khai báo function sử dụng cho trình duyệt Chrome và Safari */

@-moz-keyframes flash /* Khai báo function sử dụng cho trình duyệt Firefox */

@-ms-keyframes flash /* Khai báo function sử dụng cho trình duyệt IE */

@-o-keyframes flash /* Khai báo function sử dụng cho trình duyệt Opera */

Sau khi mình đã viết xong function, tiếp theo mình sẽ gọi nó ra để sử dụng trong CSS như sau:

/*** CSS3 Flash ***/

div.flash:hover {
	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-ms-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}

/*
div.flash {
	-webkit-animation: flash 2s infinite;
	-moz-animation: flash 2s infinite;
	-ms-animation: flash 2s infinite;
	-o-animation: flash 2s infinite;
	animation: flash 2s infinite;
}
*/

Mình sẽ có 2 cách sử dụng function này, khi người dùng di chuột qua thì mình sẽ gọi function này sử dụng cho các trình duyệt.

	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-ms-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;

Sau đó mình sẽ cho function này chạy trong vòng 2s.

        -webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;

Nhưng nếu bạn muốn hiệu ứng này hoạt động liên tục và tự động diễn ra thì các bạn sử dụng như sau:

     div.flash {
	-webkit-animation: flash 2s infinite;
	-moz-animation: flash 2s infinite;
	-ms-animation: flash 2s infinite;
	-o-animation: flash 2s infinite;
	animation: flash 2s infinite;
     }

Trong cách gọi trên nó mình viết tắt là mình sẽ gọi function flash này thực hiện trong vòng 2s và nó sẽ lặp không bao giờ ngừng với thuộc tính là : infinite.

Trong bài này mình đã ẩn class này đi, chỉ sử dụng class khi di chuột qua vì nếu để tất cả tự động nó sẽ chạy loạn xạ cả lên thì mình sẽ không quan sát được gì cả. Nên bạn muốn sử dụng cái nào thì lấy ra nhé.

Trong file style.css mình viết cho toàn bộ cả thư viện này, khi các bạn muốn sử dụng function nào thì mở file style.css và search với tên function đó nhé.

Sau khi đã hoàn tất các công việc trên thì mình thêm class đó vào trong trang HTML và sử dụng thôi.

<div class="border flash">
	CSS3 Flash
</div><!-- End .Flash -->

Mình thêm class là flash vào thẻ div, còn class border là class mình thêm vào sử dụng chung cho tất cả các thẻ div để tạo hình vuông.

Hiện tại thì trình duyệt Google Chrome hỗ trợ gần như là đầy đủ các tính năng HTML5/CSS3, mỗi hiệu ứng trong bộ thư viện điều được khai báo sử dụng đầy đủ cho các trình duyệt nhưng hiện tại có thể nó sẽ chưa hỗ trợ. Nhưng trong tương lại có thể một số trình duyệt nó sẽ hỗ trợ đầy đủ thì mình không cần phải viết thêm ^^.