Hướng dẫn cách làm hình ảnh chuyển động trong web năm 2024
Animation trong CSS giúp bạn tạo ra hiệu ứng đẹp khi phát triển web, ứng dụng. Ở bài viết này, hãy cùng nhau tìm hiểu animation CSS là gì với ví dụ minh họa cụ thể nhé! Show
Animation được giới thiệu trong phiên bản CSS3, cho phép tạo hiệu ứng chuyển động mà không cần sử dụng đến Javascript hay Flash. CSS Animation là gì?Animation được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng khá nhiều trong các website hiện nay. Để tạo một chuyển động Animation, bạn cần phải có các keyframe. Mỗi keyframe sẽ được chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao. Ngoài ra, Animation còn gồm một số thuộc tính quy định các chi tiết khá quan trọng của hiệu ứng thường đi kèm như:
Cùng Quantrimang.com tìm hiểu kỹ hơn về keyframe và các thuộc tính cần thiết trong nội dung tiếp theo. Quy tắc KeyframeBên trong quy tắc này, bạn xác định các keyframe để quy định việc phần tử sẽ chuyển động ra sao tại mỗi thời điểm nhất định. Cú pháp của keyframe:
Để chuyển động xảy ra cần phải kết nối @keyframes với phần tử. Bảng tóm tắt các hiệu ứng animation trong CSS cần biết: Thuộc tính Mô tả @keyframes Chỉ định code animation animation Một thuộc tính tốc ký để thiết lập tất cả các thuộc tính hoạt hình animation-delay Chỉ định trì hoãn bắt đầu animation animation-direction Chỉ định xem hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ thay thế animation-duration Chỉ định thời gian một hoạt ảnh sẽ hoàn thành một chu kỳ animation-fill-mode Chỉ định kiểu cho thành phần khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai) animation-iteration-count Chỉ định số lần hoạt ảnh sẽ được phát animation-name Chỉ định tên của hoạt ảnh @keyframe animation-play-state Chỉ định hoạt ảnh đang chạy hoặc tạm dừng animation-timing-function Chỉ định đường cong tốc độ của hoạt ảnh Ví dụ 1: Thay đổi màu nền background, sử dụng cú pháp from...to:
Ví dụ 2: Thay đổi màu nền background, sử dụng cú pháp %:
Code đầy đủ:
Ví dụ 3: Thay đổi cả màu nền và vị trí của phần tử khi animation đạt 25%, 50% và 100%:
Code đầy đủ:
|