Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Cách tạo Simple Looping Background Color Animation với CSS

Tìm hiểu cách tạo simple animated background color loop thuần CSS bằng keyframes và các CSS animation properties.

Trong ví dụ này, chúng ta target trực tiếp HTML element <body> với CSS, nhưng bạn có thể áp dụng code sau cho bất kỳ HTML element, class, hay id nào.

Cách tạo Simple Looping Background Color Animation với CSS

Code

Bạn có thể dùng demo này làm tham chiếu.

Lưu ý: code này không work trên IE9.

Lên kế hoạch animation

Dù bạn không biết chính xác kết quả cuối cùng, luôn thực tế có ý tưởng về hướng đi. Hãy xác định vài điều về looping animation trước khi code:

  • Muốn dùng bao nhiêu background colors?
  • Tổng animation duration bao lâu?
  • Loại animation curve nào?

Vì mục đích tutorial là giữ đơn giản, hãy dùng:

  • 5 background colors khác nhau
  • Duration 10 giây (mỗi color hiển thị 2 giây)
  • Animation curve linear (tốc độ giống nhau từ đầu đến cuối)

Tôi dùng Coolers.co nhanh chóng generate color palette harmonious cho ví dụ:

Cách tạo Simple Looping Background Color Animation với CSS

Đây là hex colors background animation sẽ loop qua:

  • sunset orange: #EE6055
  • medium aquamarine: #60D394
  • pale green: #AAF683
  • mellow yellow: #FFD97D
  • vivid tangerine: #FF9B85

Bạn không cần nhớ tên tất cả (lấy trực tiếp từ Coolers), tôi thêm cho tham khảo.

Ok, giờ có 5 colors, sẽ throw vào looping animation hiển thị mỗi color 2 giây.

Tiếp theo tạo animation dựa trên plan.

Tạo looping CSS animation

Trong CSS, animations keyframes hoạt động theo percentages từ 0% đến 100%. Thêm CSS keyframes sau vào stylesheet:

/* Standard syntax */ @keyframes backgroundColorPalette { 0% { background: #ee6055; } 25% { background: #60d394; } 50% { background: #aaf683; } 75% { background: #ffd97d; } 100% { background: #ff9b85; } }

Bây giờ có keyframes property tên backgroundColorPalette với 5 color intervals, chia đều từ 0% đến 100% của animation.

Giờ tạo CSS rule-set cho body element, để dùng keyframes color palette vừa tạo.

Thêm CSS animation properties sau vào body selector rule-set, xem gì xảy ra trong browser:

body { animation-name: backgroundColorPalette; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: alternate; }

Nếu làm đúng, bạn sẽ có continuously running background color animation mượt mà chuyển màu với interval 2 giây.

Code

Bạn có thể dùng demo này làm tham chiếu.

Cách CSS hoạt động

  • Đầu tiên, thêm property animation-name giá trị backgroundColorPalette — giờ background color keyframes tạo trước gán cho body element.
  • Dùng property animation-duration: giá trị 10s — tổng duration animation 10 giây. Có thể dùng milliseconds 10000.
  • Dùng property animation-iteration-count giá trị infinite. Đây là điều làm animation loop liên tục. Default CSS là 1 animation cycle.
  • Dùng property animation-direction giá trị alternate. Làm animation play từ đầu đến cuối, và từ cuối về đầu. Dùng property value này tránh ugly jump xảy ra nếu dùng normal animation direction value.

Điều tốt để biết

Mặc định, CSS animation speed curve type là linear. Nghĩa là không cần declare property trong CSS rule-sets khi muốn dùng nó. Đó là lý do animation speed curve ví dụ trước chạy linear.

Tuy nhiên, bạn có thể vẫn muốn thêm animation-timing-function: linear; vào CSS rule-set để code expressive hơn — đặc biệt làm team. Khó nhớ tất cả property values enabled by default trong CSS.