5293 fans
1036 reader
138 followers

CSS3 – Animation

Publish by: Demon Warlock
In category: HTML 5 & CSS 3
21 comments

Với CSS3 chúng ta có thể làm được rất nhiều thứ mà bây giờ muốn làm được phải sử dụng jQuery hoặc Flash. Vừa rắc rối mà lại ít tương thích các trình duyệt. Sẽ còn có nhiều tranh luận về các đặc tính mới của CSS3, nhưng thế nào đi nữa, cá nhân tôi vẫn thấy CSS3 quá “cool” và nhiều tính năng rất đáng mong đợi. Trong bài này chúng ta tiếp tục tìm hiểu về CSS3 – animation

Như đã nói, CSS3 vẫn trong giai đoạn phát triển do vậy chỉ những trình duyệt hiện đại như Chrome và Safari mới hỗ trợ CSS3. Cho nên để xem được demo của bài này, bạn cần sử dụng một trong hai trình duyệt trên. Cú pháp trong bài này tôi sử dụng cho trình duyệt sử dụng Webkit Engine. Chắc chắn sau này khi thành “hiện thực” cú pháp này sẽ thay đổi, nhưng ở hiện tại, chúng ta phải sử dụng cú pháp kiểu hướng trình duyệt.

Trong bài này tôi cũng giới thiệu sơ qua về trình soạn thảo code mới tôi mới biết. Nó tên là Webstorm được phát triển bởi Jetbrains. Vẫn đang trong giai đoạn thử nghiệm nhưng quá nhiều đặc tính “gây nghiện”. Sơ qua thì hơn hẳn PHPdesigner về mặt hỗ trợ code, nhưng có vẻ khởi động hơi rùa. Nếu bạn thích bạn có thể download về xài thử xem như thế nào.

Thời lượng: 23:51

Download định dạng .avi chất lượng cao: MediaFire

Dung lượng: 190MB

Xem Demo
Download

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

http://hoangmaiweb.com mai bách

Thực sự cảm ơn anh nhiều
tialan(haihao)

mình muốn nó chạy trên FF,IE cái này có cách nào làm đc không ?
xin chỉ giúp.
nó chỉ chạy trên google chrome lên buồn quá !
- Pirates
  
  firefox thì bạn dùng -moz-animation
  opera thì dùng -o-animation
tialan(haihao)

cái này chỉ chạy 2 cái hiệu ứng đầu tiên trên firefox,IE thôi còn những cái khác không chạy, mất thời gian quá, buồn chấm chán !.
Nguyễn Minh Nguyên

Anh DW Ơi! Anh có thể làm video về Flash hong. E có thấy anh bảo là ko thích flash và có bài ” 8 Nguyên nhân không dùng Flash cho website” nhưng giờ em thấy rất nhiều web dùng flash và ở Việt Nam giờ hể đi xin việc về thiết kế thì lúc nào cũng yêu cầu kỉ năng về Flash. Thanks
Phạm Duy Tân

Ủa sao em làm code giống anh mà sao không chạy. Cái hiệu ứng chạy đầu tiên

Untitled Document

#wrapper
{
width:800px;
margin: 20px auto;
}
#face
{
border: 2px solid #F00;
opacity: 1;
-webkit-transition: opacity .001s linear;
}
#face:hover
{
opacity: 0;
}

dsadsadsada
- Raymond
  
  có thể hok chạy vì cái -webkit chỉ run trên Safari và Chrome thôi
  -moz nữa để run trên FF
http://nim.vn hungpv

anh làm video này hay đấy. Có khá nhiều người biết đến anh. Em thích nhất là bộ CSS3 này. hì.
Thaole

Wow Wow Wow…Thật là tuyệt. Không ngờ css3 lại có thể làm được những việc mà jquery cũng làm được. Vậy là từ này ko phải học jquery nữa (đang oải vì nó) mà học luôn css3 thui. Nhưng mà anh DW ui, để xem cả seria css3 của anh thì tìm link thế nào ???
- phạm quý tiềm
  
  http://w3schools.com/css3/css3_animations.asp trang nay tạo amation css3 đó bạn!
shrimp2t

Tuyêt cú mèo ! . Anh DW cho em hỏi Anh học cái này ở đâu ạ có thể cho em cái link được không ạ. Bằng ngôn ngữ nào cũng được
Thanks !
http://www.tipsviet.com TipsViet

Anh ơi, em thấy cái Scriptly vừa có highlight, cũng có hiển thị màu khi viết mã màu, mà miễn phí ^^!
http://bearsharks.com clackken.smith

chậm đâu nhỉ thấy cái WebStorm chạy nhanh còn hơn cả PHPDesigner 7 mừ .
billle

a có thể làm loạt bài tutorial về javascript ko.Thanks trước.hihi
Tuệ Nguyễn

o_0 cực khủng. Ăn đứt cả js @__@. mỗi tội ko chơi đc FF.
-huy

hay thật ko cần jquery cũng làm dc
bigbabal

css3 quả thật rất cool….tut rất hay. thanks a DW !
AlanSmith

Ối giời ơi cài cái JetBrains WebStrom khởi động chậm thế như rùa ý. Khởi động nó rồi đi pha cafe xong mà vẫn chậy )
- http://www.izwebz.com Demon Warlock
  
  Mịa! chậm thiệt chứ chẳng chơi anh cũng oải cái vụ khởi động của nó. Nhưng mà nó hay, hy vọng khi nó ra phiên bản chính thức thì sẽ cải thiện vụ này.
AlanSmith

Đỉnh thật mỗi tội Fire fox không chơi được tiếc thiệt. Nhìn hay thế không cần sài JS mà vẫn được
học hỏi

Xem demo quá khủng đại ca DW ơi
hic
CSS3 quả là thần diệu
thank bác nhiều

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.