0 bình luận · lượt xem

Làm chủ hiệu ứng Animation trong CSS3 áp dụng cho Website



Hiệu ứng là một phần không thể thiếu trong việc thiết kế web. Nhờ có hiệu ứng mà ta cảm thấy web cũng như các thành phần trong web trở nên mượt mà dễ chịu hơn rất nhiều.

Và thực sự vậy trong hơn 1 tuần làm việc với giao diện web mình thấy Animation cho ta cảm giác website tải nhanh hơn, gia tăng trãi nghiệm người dùng mặc dù thời gian tải trang vẫn như cũ.

Làm chủ hiệu ứng Animation trong CSS3 áp dụng cho Website
Làm chủ hiệu ứng Animation trong CSS3 áp dụng cho Website

Bạn có tin không?

Nếu không tin hãy chèn 1 đoạn code hiệu ứng chuyển trang như sau vào website của mình nhé!

Chèn trước thẻ đóng </b:skin>
body{animation: fadeIn 3s;-webkit-animation:fadeIn 3s;-moz-animation:fadeIn 3s;overflow-x:hidden;transition:all 1s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@-moz-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@-o-keyframes fadeIn{from{opacity:0}to{opacity:1}}

Tải lại trang hoặc nhấp vào 1 bài viết trên trang bạn có cảm thấy website của mình mượt mà hơn không?

Cấu trúc Animation trong CSS3 đầy đủ

Thêm Animation cho 1 thuộc tính class/id:
Tên class/id {animation: [name] [duration] [timing] [delay] [interaction-count] [direction]}
@keyframes [name]{from{...............}to{...............}}
@-webkit-keyframes [name]{from{...............}to{...............}}
@-moz-keyframes [name]{from{...............}to{...............}}
@-o-keyframes [name]{from{opacity:0}to{...............}}

Giải thích thuộc tính

.class/#id{
  • Name = Tên hiệu ứng (Tùy chọn text bất kì)
  • Duration = Là thời gian của 1 hiệu ứng tính bằng giây (s)
  • Timing = Tốc độ chuyển động
  • delay = Sau bao lâu thì bắt đầu chuyển động
  • interaction-count = Số lần thực hiện chuyển động
  • direction = Chuyển động như lần đầu hay đảo ngược
}

from{...............}to{...............} hiệu ứng bắt đầu đến kết thúc

Trong đó các đầu hỗ trợ các trình duyệt web:
@keyframes :
@-webkit-keyframes: Hoạt động Google Chrome (phiên bản 20 trở lên) và Safari (5.1 trở lên)
@-moz-keyframes: Hoạt động trên Firefox (phiên bản 5 trở lên)
@-o-keyframes: Hoạt động trên Opera (phiên bản 12 trở lên)

Ví dụ ta viết hiệu ứng Animation cho body{...... } nó sẽ áp dụng trên toàn trang web như sau:
body{animation: fadeIn 3s;-webkit-animation:fadeIn 3s;-moz-animation:fadeIn 3s;overflow-x:hidden;transition:all 1s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

Đọc các thông số:

  • Tên hiệu ứng: fadeIn
  • 3s: Thời gian hiệu ứng hoạt động trong 3 giây
  • Hiệu ứng fadeIn là hiệu ứng từ opacity:0 đến hiện rõ dần opacity:1
  • Các thông số khác mặc định

Ví dụ Animation đầy đủ các thuộc tính

.class,#id {animation: [myAnimation] 5s linear 3s infinite alternate}
@keyframes [name]{from{...............}to{...............}}
@-webkit-keyframes [name]{from{...............}to{...............}}
@-moz-keyframes [name]{from{...............}to{...............}}
@-o-keyframes [name]{from{opacity:0}to{...............}}

Với [myAnimation] là tên hiệu ứng mình vừa đặt thay thế cho [name] bên dưới


Bảng Thuộc tính của animation trong css3:

Thuộc tínhgiá trịVí dụMô tả
animation-nametên animationanimation-name: myAnimation;Xác định tên cho một animation.
animation-durationthời giananimation-duration: 5s;Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-functionlinearanimation-timing-function: linear;Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc.
easeanimation-timing-function: ease;Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định.
ease-inanimation-timing-function: ease-in;Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.
ease-outanimation-timing-function: ease-out;Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.
ease-in-outanimation-timing-function: ease-in-out;Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.
cubic-bezier(n,n,n,n)animation-timing-function: cubic-bezier(1,1,1,0);Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.
animation-delaythời giananimation-delay: 3s;Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0
animation-iteration-countsố tự nhiênanimation-iteration-count: 4;Xác định số lần thực hiện chuyển động.
infiniteanimation-iteration-count: infinite;Chuyển động sẽ thực hiện không giới hạn số lần.
animation-directionnormalanimation-direction: normal;Chuyển động bình thường, đây là dạng mặc định.
alternateanimation-direction: alternate;Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo.
animation-play-statepausedanimation-play-state: paused;Xác định chuyển động dừng lại.
runninganimation-play-state: running;Xác định chuyển động chạy.
animation[name] [duration] [timing] [delay] [interaction-count] [direction]animation: myAnimation 5s linear 3s infinite alternate;Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính animation-play-state.



Có thể bạn thích

Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!