Kinh Nghiệm về Cách làm animation css fade in left Chi Tiết
Dương Minh Dũng đang tìm kiếm từ khóa Cách làm animation css fade in left được Cập Nhật vào lúc : 2022-11-05 12:26:04 . Với phương châm chia sẻ Bí kíp về trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi tham khảo tài liệu vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Tác giả lý giải và hướng dẫn lại nha.- Thông thường, khi tất cả chúng ta muốn thiết lập hiệu ứng hoạt động và sinh hoạt giải trí cho một phần tử nào đó thì về cơ bản tất cả chúng ta nên phải thực hiện hai việc làm. Nội dung chính Show
- 1) Cách tạo một chiếc @keyframes2) Danh sách những thuộc tính animation3) Cách áp dụng nhiều @keyframes lên một phần tử
- Công việc thứ nhất là tạo một chiếc @keyframes.Công việc thứ hai là sử dụng những thuộc tính animation để áp dụng @keyframes lên phần tử.
- Tôi có một đoạn mã như phía dưới.
- Màn hình trình duyệt sẽ hiển thị là.
- Bây giờ, tôi muốn tạo hiệu ứng hoạt động và sinh hoạt giải trí cho phần tử #test.
(tôi muốn nó di tán sang bên phải 500px rồi trở về vị trí cũ, tiếp tục lặp lại hành vi này)
- Để làm được điều đó thì trước tiên tôi tạo một chiếc @keyframes mang tên là move_right, nó sẽ đáp ứng cho trình duyệt những thông tin như:
- Ở thời điểm 0% (khi hiệu ứng hoạt động và sinh hoạt giải trí chưa ra mắt) phần tử sẽ nằm ở vị trí left 0px.Ở thời điểm 100% (khi hiệu ứng hoạt động và sinh hoạt giải trí đã kết thúc) phần tử sẽ nằm ở vị trí left 500px.
- Sau khi đã xây dựng xong cái @keyframes, tôi sẽ sử dụng những thuộc tính animation để áp dụng cái @keyframes đó lên phần tử.
- Trong trường hợp này thì tôi sử dụng ba thuộc tính:
- Thuộc tính animation-name dùng để xác định tên của cái @keyframes mà tôi muốn áp dụng lên phần tử.Thuộc tính animation-duration dùng để xác định "thời lượng" của một chu kỳ luân hồi hiệu ứng hoạt động và sinh hoạt giải trí (tôi thiết lập 3 giây)Thuộc tính animation-iteration-count dùng để xác định "số lần
lặp lại" một chu kỳ luân hồi hiệu ứng hoạt động và sinh hoạt giải trí (tôi thiết lập giá trị infinite nghĩa là không số lượng giới hạn số lần lặp lại)
1) Cách tạo một chiếc @keyframes
- @keyframes đóng vai trò in như thể một chiếc quy mô dùng để mô tả định dạng (style) của phần tử tại những thời điểm rất khác nhau trong quá trình ra mắt hiệu ứng hoạt động và sinh hoạt giải trí.
- Để tạo một chiếc @keyframes thì tất cả chúng ta sử dụng cú pháp như sau:
@keyframes tên-keyframes thời điểm 1 thuộc tính 1 : giá trị của thuộc tính ở thời điểm 1; thuộc tính 2 : giá trị của thuộc tính ở thời điểm 1; thuộc tính 3 : giá trị của thuộc tính ở thời điểm 1; thời điểm 2 thuộc tính 1 : giá trị của thuộc tính ở thời điểm 2; thuộc tính 2 : giá trị của thuộc tính ở thời điểm 2; thuộc tính 3 : giá trị của thuộc tính ở thời điểm 2; thời điểm 3 thuộc tính 1 : giá trị của thuộc tính ở thời điểm 3; thuộc tính 2 : giá trị của thuộc tính ở thời điểm 3; thuộc tính 3 : giá trị của thuộc tính ở thời điểm 3; @keyframes move 0% top:0px; left:0px; background-color:blue; 10% top:0px; left:400px; background-color:red; 40% top:200px; left:400px; background-color:green; 100% top:0px; left:0px; background-color:blue;Xem ví dụ
- Dưới đây là một số trong những điều mà tất cả chúng ta nên phải lưu ý khi tạo @keyframes.
⛔ Đối với những hiệu ứng hoạt động và sinh hoạt giải trí làm thay đổi vị trí của phần tử thì tất cả chúng ta phải thiết lập cho phần tử thuộc tính position với một trong những giá trị là relative, absolute, fixed. Bởi vì nếu không thiết lập những giá trị này thì phần tử sẽ không thể di tán được.
⛔ Đối với những hiệu ứng hoạt động và sinh hoạt giải trí làm thay đổi kích thước của phần tử thì những bạn nên phải xem xét việc thiết lập thuộc tính position với giá trị absolute hoặc fixed cho phần tử. Bởi vì nếu không thiết lập một trong hai giá trị này thì khi phần tử thay đổi kích thước, nó sẽ làm ảnh hưởng đến vị trí của những phần tử xung quanh.
⛔ Tại mỗi mốc thời điểm, tất cả chúng ta nên khai báo đầy đủ những thuộc tính được nhắc tới trong hiệu ứng hoạt động và sinh hoạt giải trí (ví dụ như cái ví dụ minh họa phía trên, tại bốn mốc thời điểm 0% 10% 40% 100% tôi đều khai báo đầy đủ ba thuộc tính top, left, background-color)
⛔ Thời điểm 0% hoàn toàn có thể thay thế bằng chữ from, thời điểm 100% hoàn toàn có thể thay thế bằng chữ to.
2) Danh sách những thuộc tính animation
- Dưới đây là list những thuộc tính nằm trong nhóm animation.
(những bạn vui lòng nhấn vào hình để xem rõ ràng hiệu suất cao & cách sử dụng của từng thuộc tính)
animation-name- Thuộc tính này dùng để xác định tên của cái @keyframes mà tất cả chúng ta muốn áp dụng lên phần tử để tạo hiệu ứng hoạt động và sinh hoạt giải trí.
animation-duration- Thuộc tính này dùng để thiết lập "thời lượng" của một chu kỳ luân hồi hiệu ứng hoạt động và sinh hoạt giải trí.
animation-iteration-count- Thuộc tính này dùng để thiết lập "số lần lặp lại" một chu kỳ luân hồi hiệu ứng hoạt động và sinh hoạt giải trí.
animation-delay- Thuộc tính này dùng để thiết lập "khoảng chừng thời gian phải chờ đón" trước khi hiệu ứng hoạt động và sinh hoạt giải trí được ra mắt.
animation-direction- Thuộc tính này dùng để "điều hướng" hiệu ứng hoạt động và sinh hoạt giải trí.
animation-fill-mode- Thuộc tính này dùng để chỉ định bộ định dạng (style) mà phần tử sẽ được áp dụng ở thời điểm trước khi hiệu ứng hoạt động và sinh hoạt giải trí ra mắt & sau khi hiệu ứng hoạt động và sinh hoạt giải trí kết thúc.
animation-play-state- Thuộc tính này dùng để tùy chỉnh việc tiếp tục hay tạm ngưng hiệu ứng hoạt động và sinh hoạt giải trí.
animation-timing-function- Thuộc tính này dùng để tùy chỉnh "tốc độ hoạt động và sinh hoạt giải trí" của hiệu ứng ở từng quá trình.
animation- Thuộc tính này là cú pháp tổng quát dùng để thiết lập hiệu ứng hoạt động và sinh hoạt giải trí cho phần tử (thay vì phải phối hợp những thuộc tính animation riêng lẻ phía trên thì giờ đây tất cả chúng ta chỉ việc sử dụng mỗi thuộc tính này là đủ)
3) Cách áp dụng nhiều @keyframes lên một phần tử
- Trong những ví dụ minh họa ở trên, những cái hiệu ứng hoạt động và sinh hoạt giải trí do tôi tạo ra đều là hiệu ứng hoạt động và sinh hoạt giải trí thuộc loại đơn giản nhất. Sau này, tùy vào việc làm mà những bạn sẽ phải tạo ra những cái hiệu ứng hoạt động và sinh hoạt giải trí phức tạp hơn rất nhiều, nếu chỉ sử dụng duy nhất một chiếc @keyframes thì sẽ không thể nào đáp ứng được yêu cầu, khi đó tất cả chúng ta nên phải áp dụng nhiều @keyframes lên phần tử.
- Để áp dụng nhiều @keyframes lên một phần tử thì khi thiết lập giá trị cho thuộc tính animation-name, tất cả chúng ta nên phải gán nhiều @keyframes & kèm theo một dấu phẩy nằm giữa mỗi hai @keyframes.
- Tôi tạo hiệu ứng hoạt động và sinh hoạt giải trí cho phần tử #test bởi ba @keyframes: move, reSize, bgColor
#test background-color:green; width:50px; height:50px; position:relative; animation-name:move,reSize,bgColor; animation-duration:3s; animation-iteration-count:infinite; @keyframes move fromleft:0px; toleft:500px; @keyframes reSize fromwidth:50px;height:50px; towidth:100px;height:100px; @keyframes bgColor frombackground-color:green; tobackground-color:blue;Xem ví dụ
- Lưu ý: Đối với những thuộc tính animation khác cũng tương tự như vậy, nếu những bạn muốn thiết lập nhiều giá trị để đáp ứng cho riêng từng cái @keyframes thì những bạn nên phải gán cho nó nhiều giá trị kèm theo một dấu phẩy nằm giữa mỗi hai giá trị.
animation-name: move, reSize, bgColor; animation-duration: 3s; animation-iteration-count: infinite, 2, infinite;Xem ví dụ
- Thuộc tính animation-name dùng để xác định tên của cái @keyframes mà tất cả chúng ta muốn áp dụng lên phần tử để tạo hiệu ứng hoạt động và sinh hoạt giải trí.
- Cú pháp:
animation-name: value;- Trong số đó, value hoàn toàn có thể được xác định dựa theo một trong bốn loại giá trị:
name- Chỉ định rõ ràng tên của cái @keyframes mà tất cả chúng ta muốn áp dụng lên phần tử.
none- Không thiết lập hiệu ứng hoạt động và sinh hoạt giải trí cho phần tử.
initial- Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính animation-name có mức giá trị là none)
inherit- Kế thừa giá trị thuộc tính animation-name từ phần tử cha của nó.
- Thuộc tính animation-iteration-count dùng để thiết lập "số lần lặp lại" một chu kỳ luân hồi hiệu ứng hoạt động và sinh hoạt giải trí.
"Số lần lặp lại" là gồm có luôn cả lần thực thi đầu tiên.
- Cú pháp:
animation-iteration-count: value;- Trong số đó, value hoàn toàn có thể được xác định dựa theo một trong bốn loại giá trị:
number- Chỉ định rõ ràng số lần lặp lại một chu kỳ luân hồi hiệu ứng hoạt động và sinh hoạt giải trí.
Xem ví dụ infinite- Không số lượng giới hạn số lần lặp lại (lặp lại mãi mãi)
initial- Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính animation-iteration-count có mức giá trị là một trong)
inherit- Kế thừa giá trị thuộc tính animation-iteration-count từ phần tử cha của nó.
- Thuộc tính animation-direction dùng để điều hướng hiệu ứng hoạt động và sinh hoạt giải trí.
- Cú pháp:
animation-direction: value;- Trong số đó, value hoàn toàn có thể được xác định dựa theo một trong sáu loại giá trị:
normal- Hiệu ứng hoạt động và sinh hoạt giải trí ra mắt theo chiều xuôi.
Xem ví dụ reverse- Hiệu ứng hoạt động và sinh hoạt giải trí ra mắt theo chiều ngược.
alternate- Hiệu ứng hoạt động và sinh hoạt giải trí động ra mắt theo chiều xuôi trước, sau đó ra mắt theo chiều ngược.
alternate-reverse- Hiệu ứng hoạt động và sinh hoạt giải trí động ra mắt theo chiều ngược trước, sau đó ra mắt theo chiều xuôi.
initial- Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính animation-direction có mức giá trị là normal)
inherit- Kế thừa giá trị thuộc tính animation-direction từ phần tử cha của nó.
- Thuộc tính animation-fill-mode dùng để chỉ định bộ định dạng (style) mà phần tử sẽ được áp dụng ở thời điểm trước khi hiệu ứng hoạt động và sinh hoạt giải trí ra mắt & sau khi hiệu ứng hoạt động và sinh hoạt giải trí kết thúc.
- Cú pháp:
animation-fill-mode: value;- Trong số đó, value hoàn toàn có thể được xác định dựa theo một trong sáu loại giá trị:
none- Trước khi hiệu ứng hoạt động và sinh hoạt giải trí được ra mắt & sau khi hiệu ứng hoạt động và sinh hoạt giải trí kết thúc, phần tử sẽ sử dụng style mặc định của nó.
Xem ví dụ forwards- Trước khi hiệu ứng hoạt động và sinh hoạt giải trí ra mắt thì phần tử sẽ sử dụng style mặc định của nó.
- Sau khi hiệu ứng hoạt động và sinh hoạt giải trí kết thúc thì phần tử sẽ sử dụng style của trạng thái ở đầu cuối.
backwards- Trước khi hiệu ứng hoạt động và sinh hoạt giải trí ra mắt thì phần tử sẽ sử dụng style của trạng thái đầu tiên.
- Sau khi hiệu ứng hoạt động và sinh hoạt giải trí kết thúc thì phần tử sẽ sử dụng style mặc định của nó.
both- Trước khi hiệu ứng hoạt động và sinh hoạt giải trí ra mắt thì phần tử sẽ sử dụng style của trạng thái đầu tiên.
- Sau khi hiệu ứng hoạt động và sinh hoạt giải trí kết thúc thì phần tử sẽ sử dụng style của trạng thái ở đầu cuối.
initial- Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính animation-fill-mode có mức giá trị là none)
inherit- Kế thừa giá trị thuộc tính animation-fill-mode từ phần tử cha của nó.
- Lưu ý: Trạng thái "đầu tiên" & "ở đầu cuối" còn phụ thuộc vào hai thuộc tính animation-direction & animation-iteration-count.
- Thuộc tính animation-play-state dùng để tùy chỉnh việc tiếp tục hay tạm ngưng hiệu ứng hoạt động và sinh hoạt giải trí.
- Cú pháp:
animation-play-state: value;- Trong số đó, value hoàn toàn có thể được xác định dựa theo một trong bốn loại giá trị:
running- Hiệu ứng hoạt động và sinh hoạt giải trí tiếp tục được ra mắt.
Xem ví dụ paused- Tạm ngưng hiệu ứng hoạt động và sinh hoạt giải trí.
initial- Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính animation-play-state có mức giá trị là running)
inherit- Kế thừa giá trị thuộc tính animation-play-state từ phần tử cha của nó.
- Thông thường, tại một cặp thời điểm liền kề, khi hiệu ứng hoạt động và sinh hoạt giải trí ra mắt thì mặc định hiệu ứng sẽ hoạt động và sinh hoạt giải trí khá chậm ở quá trình đầu, nhanh dần ở quá trình giữa, đình trệ ở quá trình cuối.
- Tuy nhiên, với việc sử dụng thuộc tính animation-timing-function thì tất cả chúng ta hoàn toàn có thể thiết lập lại tốc độ hoạt động và sinh hoạt giải trí của hiệu ứng ở từng quá trình.
- Cú pháp:
animation-timing-function: value;- Trong số đó, value hoàn toàn có thể được xác định dựa theo một trong bảy loại giá trị:
linear- Cùng một tốc độ từ đầu đến cuối.
Xem ví dụ ease- Khá chậm ở quá trình đầu, nhanh dần ở quá trình giữa, đình trệ ở quá trình cuối.
ease-in- Chậm ở quá trình đầu, nhanh ở quá trình sau.
ease-out- Nhanh ở quá trình đầu, chậm ở quá trình sau.
ease-in-out- Chậm ở quá trình đầu & quá trình cuối, nhanh ở quá trình giữa.
initial- Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính animation-timing-function có mức giá trị là ease)
inherit- Kế thừa giá trị thuộc tính animation-timing-function từ phần tử cha của nó.
- Thuộc tính animation là cú pháp tổng quát dùng để thiết lập hiệu ứng hoạt động và sinh hoạt giải trí cho phần tử.
(thay vì phải sử dụng phối hợp nhiều thuộc tính animation riêng lẻ thì giờ đây tất cả chúng ta chỉ việc dùng mỗi thuộc tính này là đủ)
- Cú pháp:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;- Trong số đó, tám giá trị name duration timing-function delay iteration-count direction fill-mode play-state lần lượt là giá trị của tám thuộc tính:
- animation-nameanimation-durationanimation-iteration-countanimation-delayanimation-directionanimation-fill-modeanimation-play-stateanimation-timing-function
- Tuy nhiên, thuộc tính animation không bắt buộc tất cả chúng ta phải gán cho nó đủ tám giá trị, những giá trị của thuộc tính nào không đủ thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính đó.
#test background-color:green; width:100px; height:100px; position:relative; animation:move 3s infinite; @keyframes move fromleft:0px; toleft:500px;Xem ví dụ
Tải thêm tài liệu liên quan đến nội dung bài viết Cách làm animation css fade in left