Tự tạo hiệu ứng với CSS3 Animation

Hiện tại thì với sức mạnh của CSS3 thì bạn có thể làm rất nhiều hiệu ứng, hoạt ảnh (animation) mà không cần sử dụng đến Javascript cũng như jQuery. Bạn có thể bắt gặp rất rất nhiều hiệu ứng mới lạ bằng ở đủ mọi website lớn nhỏ. Có rất nhiều cái lợi khi sử dụng CSS3 thay vì jQuery hay Javascript ví dụ như lúc nào cũng hoạt động rất nhanh không làm ảnh hưởng mấy đến tốc độ tải trang.


Cũng chính vì điều này mà minh tin rằng khá nhiều bạn thắc mắc rằng để tạo ra hiệu ứng bằng CSS3 thì phải làm thế nào, cho nên hôm nay mình sẽ hướng dẫn các bạn những kiến thức cơ bản trong việc tự tạo một hiệu ứng bằng CSS3.

Keyframe trong CSS3 cho phép các bạn tạo hoạch định trước những gì sẽ thay đổi trong một khoảng thời gian do chính chúng ta quy định.

Cú pháp khai báo của Keyframe

@-webkit-keyframes tên-hiệu-ứng {
   0%     { thuộc tính: giá trị; }
   30%    { thuộc tính: giá trị; }
   100%   { thuộc tính: giá trị; }
}
@-moz-keyframes tên-hiệu-ứng {
   0%     { thuộc tính: giá trị; }
   30%    { thuộc tính: giá trị; }
   100%   { thuộc tính: giá trị; }
}
@-o-keyframes tên-hiệu-ứng {
   0%     { thuộc tính: giá trị; }
   30%    { thuộc tính: giá trị; }
   100%   { thuộc tính: giá trị; }
}
@keyframes tên-hiệu-ứng {
   0%     { thuộc tính: giá trị; }
   30%    { thuộc tính: giá trị; }
   100%   { thuộc tính: giá trị; }
}

với các số % mình giải thích nhỏ thế này, trong khoảng thời gian xác định ví dụ như 10s, thì 0s đầu tiên nó làm những gì, 3s sau nó sẽ lâm những gì, và tại 10s nó làm gì. Nói thế chắc bạn cũng hiểu, nó là phân khúc hoạt động của hiệu ứng chúng ta đã tạo.

Cách thức sử dụng

.tên-class {
  -webkit-animation: tên-hiệu-ứng 5s; /* Safari 4+ */
  -moz-animation:    tên-hiệu-ứng 5s; /* Fx 5+ */
  -o-animation:      tên-hiệu-ứng 5s; /* Opera 12+ */
  animation:         tên-hiệu-ứng 5s; /* IE 10+ */
}

với tên-hiệu-ứng là tên mà chúng ta đã làm ở phần khai báo ở trên, còn 5s là khoảng thời gian thực hiện toạn bộ các hành động đó.

Một số ví dụ thực tế

Mình có một hình ảnh, ví dụ như mình lấy logo của mình vào

<img class="hieu-ung" src="http://3.bp.blogspot.com/-xS63ihF-rm4/UoRLQQXtZdI/AAAAAAAAA4k/yyol9w3ReW4/w605-h450-no/logo2.png" />

Hiệu ứng lắc

Bây giờ mình sẽ tạo một hiệu ứng cho ảnh lắc qua lắc lại bằng thuộc tính rotate

@-webkit-keyframes lac {
 0% { -webkit-transform: rotate(0deg); }
 17% { -webkit-transform: rotate(10deg); }
 34% { -webkit-transform: rotate(-10deg); }
 51% { -webkit-transform: rotate(6deg); }
 68% { -webkit-transform: rotate(-6deg); }
 85% { -webkit-transform: rotate(3deg); }
 100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes lac {
 0% { -moz-transform: rotate(0deg); }
 17% { -moz-transform: rotate(10deg); }
 34% { -moz-transform: rotate(-10deg); }
 51% { -moz-transform: rotate(6deg); }
 68% { -moz-transform: rotate(-6deg); }
 85% { -moz-transform: rotate(3deg); }
 100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes lac {
 0% { -o-transform: rotate(0deg); }
 17% { -o-transform: rotate(10deg); }
 34% { -o-transform: rotate(-10deg); }
 51% { -o-transform: rotate(6deg); }
 68% { -o-transform: rotate(-6deg); }
 85% { -o-transform: rotate(3deg); }
 100% { -o-transform: rotate(0deg); }
}
@keyframes lac {
 0% { transform: rotate(0deg); }
 17% { transform: rotate(10deg); }
 34% { transform: rotate(-10deg); }
 51% { transform: rotate(6deg); }
 68% { transform: rotate(-6deg); }
 85% { transform: rotate(3deg); }
 100% { transform: rotate(0deg); }
}

Bây giờ mình sẽ cho hiệu ứng này chạy khi người dùng rê chuột vào nó sử dụng hover trong CSS3

.hieu-ung:hover {
 -webkit-animation: lac 0.7s;
 -moz-animation: lac 0.7s;
 -o-animation: lac 0.7s;
 animation: lac 0.7s;
}

Hiệu ứng chạy quay

Ví dụ thứ 2 mình sẽ cho logo của mình vừa chạy vừa lộn bằng margin và rotate

@-webkit-keyframes quay {
 0% { -webkit-transform: rotate(0deg); }
 17% { -webkit-transform: rotate(10deg); }
 34% { margin-left:20px;  }
 51% { -webkit-transform: rotate(15deg); }
 68% { margin-left:40px; }
 85% { -webkit-transform: rotate(20deg); }
 100% { margin-left:60px; }
}
@-moz-keyframes quay {
 0% { -webkit-transform: rotate(0deg); }
 17% { -webkit-transform: rotate(10deg); }
 34% { margin-left:20px;  }
 51% { -webkit-transform: rotate(15deg); }
 68% { margin-left:40px; }
 85% { -webkit-transform: rotate(20deg); }
 100% { margin-left:60px; }
}
@-o-keyframes quay {
 0% { -webkit-transform: rotate(0deg); }
 17% { -webkit-transform: rotate(10deg); }
 34% { margin-left:20px;  }
 51% { -webkit-transform: rotate(15deg); }
 68% { margin-left:40px; }
 85% { -webkit-transform: rotate(20deg); }
 100% { margin-left:60px; }
}
@keyframes quay {
 0% { -webkit-transform: rotate(0deg); }
 17% { -webkit-transform: rotate(10deg); }
 34% { margin-left:20px;  }
 51% { -webkit-transform: rotate(15deg); }
 68% { margin-left:40px; }
 85% { -webkit-transform: rotate(20deg); }
 100% { margin-left:60px; }
}

và mình tiếp tục sử dụng đoạn css này cho class hieu-ung tại hình ảnh.

.hieu-ung:hover {
 -webkit-animation: quay 0.7s;
 -moz-animation: quay 0.7s;
 -o-animation: quay 0.7s;
 animation: quay 0.7s;
}

ví dụ có hơi xấu nên bạn có thể từ mình chỉnh sửa lại nhé.

Lời kết

Đây chỉ mới là cơ bản trong việc tại hiệu ứng bằng CSS3 thôi, ngoài ra thì còn rất nhiều những thuộc tính và chi tiết nhỏ trong việc làm cho hiệu ứng thêm phần bắt mắt cũng như nhiều tính năng hơn.