Sự khác nhau giữa animation và transition css
Trong CSS3 có 2 thuộc tính quan trọng đó là Transition và Animation. Đây là một kỹ thuật rất hay giúp làm chuyển động cho phần tử HTML mà không cần Javascript hay Flash. Animation làm chuyển động dựa trên những thay đổi CSS Trong bài viết này mình sẽ giới thiệu với các bạn thuộc tính Animation và ứng dụng đơn giản của nó. VD: ứng dụng chuyển động sau. demo : https://jsfiddle.net/tuanvh/fbLegec2/
Cấu trúc @keyframeĐể tạo animation bằng CSS3 bạn cần phải nắm được quy tắc @keyframes bởi đây chính là nơi bạn đặt code CSS để tạo ra animation. Cú pháp:
trong đó
VD:
Trong đó:
Hoặc bạn có thể thay “from” và “to” bằng vị trí thời gian mà bạn muốn có sự thay đổi:
Các trình
duyệt Internet Explorer từ phiên bản 10 trở lên, Firefox và Opera hỗ trợ hoàn toàn
animation
Giải thích:
Transition
demo: https://jsfiddle.net/tuanvh/rnaxykvd/8/ Thuộc tính “transition” giúp làm chuyển động dựa trên sự thay đổi giá trị các thuộc tính CSS. Cú pháp:
Các thuộc tính trong bộ transition
Hy vọng là với kiến thức về transition & animation thì bạn sẽ cảm thấy mình làm được nhiều điều thú vị hơn với CSS Tham khảo: http://www.w3schools.com/css/css3_animations.asp http://www.w3schools.com/css/css3_transitions.asp |