Hiệu ứng loading animation với CSS3

Trong thiết kế website khi CSS3 chưa ra đời thì việc tạo hiệu ứng cho trang web chủ yếu là dùng Flash hoặc jQuery. Việc dùng hai công nghệ đó khiến tốc độ website ảnh hưởng một phần. Và hôm nay, mình sẽ giúp các bạn tạo hiệu ứng chuyển động, chủ yếu nhờ đến hai thuộc tính Transition và Animation có trong CSS3.
 
CSS3 Animation
 
Trước khi vào phần hướng dẫn, chúng ta tham khảo vài thuộc tính của Animation và @keyframe. Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh.
 

Cấu trúc @keyframe
 
Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
 

Và bây giờ chúng ta bài tạo hiệu ứng loading animation
 
HTML5
CSS3 Tạo thời gian delay cho chuyển động. Và cuối cùng là @keyframes.  

Với hiệu ứng trên bạn có thể nâng cấp website từ sử dụng javascrip thành css làm tăng tốc độ website của mình hơn.
 
 
Nguồn: Code Theory