CSS là viết tắt của cascading style sheet và nó được sử dụng để thiết kế một trang web. HTML tạo nên cấu trúc trang web, nhưng CSS là thứ được sử dụng để thu hút thiết kế đó. Trong hướng dẫn này, bạn sẽ xem xét CSS Animations
Hoạt ảnh CSS
Thuộc tính hoạt hình CSS được sử dụng để tạo hoạt ảnh trên trang web. Bạn có thể thay đổi bao nhiêu thuộc tính CSS tùy thích. Và bạn có thể làm điều này nhiều lần như bạn muốn.
cú pháp.
hoạt hình. tên thời lượng thời gian-chức năng trì hoãn lặp lại-đếm hướng lấp đầy chế độ phát-trạng thái;
Khóa học Full Stack Web Developer
Để trở thành chuyên gia về MEAN Stack Xem khóa họcThuộc tính hoạt hình CSS
Tài sản
Sự miêu tả
@keyframes
Nó được sử dụng để xác định các hình ảnh động
hoạt hình
Nó là một thuộc tính tốc ký được sử dụng để đặt tất cả các thuộc tính khác
chậm trễ hoạt hình
Nó đặt khi hoạt ảnh sẽ bắt đầu
Thời lượng hoạt ảnh
Nó chỉ định thời gian hoạt ảnh sẽ hoàn thành một chu kỳ
hướng hoạt hình
Nó đặt xem hoạt ảnh sẽ phát theo chu kỳ tiến, lùi hay luân phiên
chế độ hoạt hình-điền
Nó chỉ định cách một hoạt hình CSS sẽ áp dụng các kiểu cho mục tiêu của nó, trước và sau khi nó đang thực thi
hoạt hình-phát-trạng thái
Điều này cho biết hoạt ảnh hiện đang chạy hay tạm dừng
tên hoạt hình
Nó được sử dụng để đề cập đến tên của hoạt ảnh được xác định bởi @keyframes sẽ áp dụng cho các thành phần được chọn
Ví dụ Hoạt hình CSS 1
Trong ví dụ này, 0% là bắt đầu hoạt ảnh và 100% là kết thúc
Ghi chú. Nếu thời lượng cho hoạt ảnh không được xác định, nó sẽ không chạy được vì giá trị mặc định được đặt cho thời lượng là 0 giây
Nổi bật so với các đồng nghiệp của bạn trong mùa đánh giá này
Bắt đầu học với các khóa học MIỄN PHÍ của chúng tôi Đăng ký ngayHoạt hình CSS Ví dụ 2
Ở đây, giá trị giảm nhẹ được sử dụng để đặt hoạt ảnh có kết thúc chậm
Thuộc tính CSS animation-iteration-count cho biết không. số lần loại tiền hoạt hình tôi sử dụng sẽ phát bình thường. Giá trị mặc định được đặt cho CSS animation-iteration-count là 1
Thuộc tính CSS animation-fill-mode xác định kiểu của phần tử khi hoạt ảnh không hoạt động
Có kỹ năng về HTML5 và CSS3 với. Click để xem chi tiết chương trình.
Phần kết luận
Vì vậy, trong hướng dẫn hoạt ảnh CSS này, bạn đã tìm hiểu về một số giá trị của thuộc tính hoạt ảnh và cách bạn có thể sử dụng chúng để tạo hoạt ảnh cho các thành phần trên trang web.
Nếu bạn muốn nâng cao kiến thức về CSS và nắm vững các ứng dụng thực tế của nó, thì Chương trình Sau đại học về Phát triển Web Full Stack của Simplilearn là chương trình mà bạn nhất định nên khám phá. Khóa học bootcamp toàn diện này được hợp tác với Caltech CTME và sẽ giúp bạn các kỹ thuật mã hóa và kỹ năng phát triển phần mềm hiệu quả nhất hiện nay ngay từ đầu - giúp bạn đạt được tất cả những gì bạn cần để trở thành một kỹ thuật viên công nghệ toàn diện thành công, đẳng cấp thế giới ngày nay
Nếu bạn có bất kỳ phản hồi hoặc câu hỏi nào cho chúng tôi về hướng dẫn hoạt hình CSS, hãy liên hệ với chúng tôi bằng cách chia sẻ chúng trong phần nhận xét bạn tìm thấy ở cuối trang này. Nhóm các doanh nghiệp vừa và nhỏ của chúng tôi sẽ sớm xem xét và chia sẻ phản hồi với họ
học tập vui vẻ
Tìm Full Stack Developer của chúng tôi - MEAN Stack Bootcamp trực tuyến tại các thành phố hàng đầu
NameDatePlaceFull Stack Developer - MEAN StackCohort bắt đầu vào ngày 1 tháng 2 năm 2023,Đợt cuối tuầnChi tiết CityView của bạnKhóa học dành cho nhà phát triển ngăn xếp trung bình tại SingaporeCohort bắt đầu vào ngày 16 tháng 2 năm 2023,
Đợt cuối tuầnSingaporeXem chi tiếtNhà phát triển Full Stack - MEAN StackCohort bắt đầu vào ngày 9 tháng 3 năm 2023,
Lô hàng cuối tuầnChi tiết CityView của bạn
Thông tin về các Tác giả
Aryan là một người đam mê công nghệ, thích cập nhật các xu hướng công nghệ ngày nay. Anh ấy đam mê tất cả mọi thứ về công nghệ, một nhà nghiên cứu sắc sảo và viết để truyền cảm hứng. Bên cạnh công nghệ, anh ấy là một cầu thủ bóng đá tích cực và là một người đam mê trò chơi