animation-name: Tên của animation.animation-duration: Thời gian của animationanimation-timing-function: Mô tả animation sẽ diễn ra như thế nào trên chu kì của nó. Giá trị mặc định ease.animation-delay: Sau bao lâu animation sẽ bắt đầu(độ trễ). mặc định 0sanimation-iteration-count: Số lần thực hiện animationanimation-direction: Chỉ định xem animation sẽ diễn ra lần lượt từng chu kì hay ở chu kì tiếp theo sẽ đảo ngược lại với 2 giá trị: normal và alternate. Giá trị này chỉ có tác dụng khi animation-iteration-count có giá trị từ 2 trở lên. animation-play-state: Chỉ định animation có diễn ra hay ko (running hoặc paused)Các bạn chú ý rằng Animation chỉ hỗ trợ bộ -moz và -webkit vì thế chỉ chạy được trên Firefox, Chrome và Safari. Và các bạn cần thêm tiền tố vào trước animation ứng với mỗi trình duyệt.
Ở trên chúng ta đã nói tới animation-name. Tên của animation này được định nghĩa bởi @keyframe. @keyframe này sẽ định nghĩa animation sẽ diễn ra như thế nào.
Cấu trúc @keyframe
1 | @keyframes animationname {keyframes-selector {css-styles;}} |
@keyframes:từ khóa.Animationname: bắt buộc phải có. tên của animation và có tác dụng khi gọi animation.keyframes-selector: bắt buộc. Và được xác định bởi phần trăm thời gian diễn ra animationcss-style: Cần có 1 hay nhiều thuộc tính css.Đó là những thuộc tính của animation. Tiếp theo chúng ta sẽ xem sử dụng chúng như thế nào vào demo. Trong demo này chúng ta thấy khi hover qua sẽ có sự chuyển động của colum từ trái qua phải và trở về vị trí cũ. Vậy chúng ta sẽ áp dụng css animation ra sao đây? Chúng ta cùng làm nào:
Mã html
02 | < div id = "colum1" class = "colum" > |
04 | < p >Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</ p > |
08 | < div id = "colum2" class = "colum" > |
10 | < p >Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</ p > |
14 | < div id = "colum3" class = "colum" > |
16 | < p >Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</ p > |
20 | < div id = "colum4" class = "colum" > |
22 | < p >Lorem ipsum dolor sit amet, consectetue adi piscing elitsed dia myni bh euismocidunt dolor non lorem.</ p > |
Mã CSS cho phần hiển thị:
05 | background : url (../images/bg- block .png) no-repeat 0 bottom ; |
10 | #colum 2: hover, #colum 3: hover, #colum 4: hover { |
11 | z-index : 5 !important ; |
16 | background : url (../images/bg-step.png) no-repeat 0 0 ; |
19 | background : url (../images/bg-step.png) no-repeat 0 bottom ; |
23 | background : url (../images/bg-step 2 .png) no-repeat 0 0 ; |
26 | background : url (../images/bg-step 2 .png) no-repeat 0 bottom ; |
30 | background : url (../images/bg-step 3 .png) no-repeat 0 0 ; |
33 | background : url (../images/bg-step 3 .png) no-repeat 0 bottom ; |
37 | background : url (../images/bg-step 4 .png) no-repeat 0 0 ; |
40 | background : url (../images/bg-step 4 .png) no-repeat 0 bottom ; |
45 | font-family : "Trebuchet MS" , Arial , Helvetica , sans-serif ; |
48 | text-shadow : 1px 1px 0 rgba( 255 , 255 , 255 , . 5 ), 1px 1px 0 rgba( 0 , 0 , 0 , . 5 ) inset ; |
49 | background : url (../images/bg-h.png) bottom repeat-x ; |
50 | margin : 10px 47px 0px 21px ; |
51 | padding : 17px 0px 19px ; |
53 | text-shadow : 1px 1px 0 rgba( 255 , 255 , 255 , . 3 ); |
65 | padding : 8px 82px 0px 19px ; |
67 | text-shadow : 1px 1px 0 rgba( 255 , 255 , 255 , . 2 ); |
74 | display : inline- block ; |
75 | box-shadow: 1px 1px 0 rgba( 255 , 255 , 255 , . 3 ), 1px 1px 3px rgba( 0 , 0 , 0 , . 5 ) inset ; |
82 | text-shadow : 1px 1px 0 rgba( 0 , 0 , 0 , . 7 ); |
83 | text-decoration : none ; |
84 | margin : 0px 0px 0px 20px ; |
Bắt đầu hiệu ứng Animation
Trước hết chúng ta cần định nghĩa animation này đã. Như đã thấy ở demo. Colum sẽ chuyển dịch từ vị trí ban đầu sang phải 60px rồi lại trở về vị trí cũ. Vậy đã sẽ định nghĩa animation này như sau.
Ban đầu(0%): colum tại vị trí 1.Một phần tư thời gian(25%): Colum di chuyển từ vị trí 1 sang phải tới vị trí 2 cách vị trí 1 30pxNửa thời gian(50%): Colum di chuyển từ vị trí 2 sang phải tới vị trí 3 cách vị trí 1 60px Ba phần tư thời gian(75%):Colum di chuyển từ vị trí 3 sang trái về vị trí 2 cách vị trí 1 30px. Cuối cùng(100%): Colum di chuyển từ vị trí 2 về vị trí 1Và đây là @keyframes
01 | @-webkit-keyframes myfirst |
03 | 0% {-webkit-transform: translate( 0px , 0px ); } |
04 | 25% {-webkit-transform: translate( 30px , 0px );} |
05 | 50% {-webkit-transform: translate( 60px , 0px ); } |
06 | 75% {-webkit-transform: translate( 30px , 0px ); } |
07 | 100% {-webkit-transform: translate( 0px , 0px ); } |
09 | @-moz-keyframes myfirst |
11 | 0% {-moz-transform: translate( 0px , 0px ); } |
12 | 25% {-moz-transform: translate( 30px , 0px );} |
13 | 50% {-moz-transform: translate( 60px , 0px ); } |
14 | 75% {-moz-transform: translate( 30px , 0px ); } |
15 | 100% {-moz-transform: translate( 0px , 0px ); } |
Cuối cùng ta chỉ cần gọi hàm Animation
1 | #colum 2: hover, #colum 3: hover, #colum 4: hover { |
2 | -webkit-animation: myfirst 0.8 s linear 0 s 1 alternate; |
3 | -moz-animation: myfirst 0.8 s linear 0 s 1 alternate; |
Như vậy chúng ta đã có một hiệu ứng cho trang web sử dụng CSS3 Animation. Nếu như các bạn tìm được hiệu ứng trên trang web nào đẹp hãy chia sẽ cùng mọi người. Hoặc tốt hơn hết hãy viết một tut gửi về ntuts.com mọi người chắc hẳn sẽ rất biết ơn về sự chia sẻ của các bạn! Cám ơn mọi người!
Tải code
http://dl.dropbox.com/u/55755057/test9.rarXem demo
http://ntuts.com/demo/css3-animation/Copy trang
www.ntuts.com