Hướng dẫn does javascript require css3 animation? - javascript có yêu cầu hoạt ảnh css3 không?

Chuyển đổi, biến đổi và hoạt hình

Xin chào 👋

Lần này, chúng ta sẽ di chuyển mọi thứ chỉ với CSS. Vâng, bạn đã đọc nó đúng. Chúng tôi không cần JavaScript để làm cho các yếu tố HTML di chuyển.

Hãy thêm một số hành động vào câu chuyện của chúng tôi!

Chuyển tiếp

Chuyển đổi trong CSS có hai điều chính để làm điều đó. Xác định phần tử CSS bạn muốn truyền và thời lượng hiệu ứng.

Hãy xem nó trông như thế nào:

Đây là một div mà chúng tôi có kiểu dáng trông giống như một hộp đen với width: 100px và height:100px:that we styled to look like a black box with width: 100px and height:100px:

Trong ví dụ này, chúng tôi chọn thêm hiệu ứng chuyển đổi trên widthProperty khi bao gồm phần tử div. Chúng tôi có thể làm tương tự trên các thuộc tính CSS khác. Bạn cũng có thể thêm hiệu ứng cho một số thuộc tính CSS, như transition: width 2s, height 2s;.property when covering the div element. We could do the same on other CSS properties. You can also add effect to several CSS properties, like transition: width 2s, height 2s;.

Được rồi, còn 2s thì sao? Điều này thể hiện thời lượng của quá trình chuyển đổi: 2 giây.2s? This represents the duration of the transition: 2 seconds.

Chúng ta có thể làm những việc khác, như trì hoãn hiệu ứng chuyển đổi bằng cách sử dụng thuộc tính transition-delay và cho nó vài giây. Chúng tôi cũng có thể chơi với đường cong tốc độ và điều này được thực hiện bằng cách sử dụng thuộc tính transition-timing-function. Thuộc tính này có thể lấy nhiều giá trị khác nhau:

• ease: Hiệu ứng với một khởi đầu chậm, sau đó nhanh, sau đó kết thúc chậm.
• width: 100px0: Hiệu ứng với cùng tốc độ từ đầu đến cuối.
• width: 100px1: Hiệu ứng với một khởi đầu chậm.
• width: 100px2: Hiệu ứng với một kết thúc chậm.
• width: 100px3: Hiệu ứng với một khởi đầu và kết thúc chậm.
• width: 100px4: Cho phép bạn xác định các giá trị của riêng mình trong hàm hình khối.cubic-bezier function.

Ví dụ với tất cả các thuộc tính chuyển tiếp (phiên bản mở rộng và tốc ký):

Example:

Tìm mã nguồn ở đây.

Biến đổi

Bây giờ, các biến đổi. Thuộc tính CSS này cho phép chúng tôi làm những điều thú vị hơn như di chuyển, xoay, tỷ lệ và các phần tử lệch trong 2D hoặc 3D.

Dưới đây là các phương pháp chuyển đổi 2D được sử dụng phổ biến nhất:

• width: 100px5
• width: 100px6
• width: 100px7
• width: 100px8
• width: 100px9

Đối với chuyển đổi 3D, bạn có thể sử dụng các phương pháp sau:

• height:100px0
• height:100px1
• height:100px2

Ví dụ về chuyển đổi với biến đổi

Hình ảnh động

Và cuối cùng, điều thú vị nhất: hoạt hình. Vâng, bạn chỉ có thể làm động các yếu tố với CSS. Không cần JavaScript!animations. Yes, you can animate elements with CSS only. No need for JavaScript!

Dưới đây là các thuộc tính giàu CSS bạn có thể sử dụng cho mục đích này:

• height:100px3: Điều này sẽ dần dần thay đổi từ phong cách hiện tại sang phong cách mới tại một thời điểm cụ thể. Bạn cần đặt tên cho nó để bạn có thể sử dụng nó sau. Điều này được thực hiện với height:100px4.
• height:100px5: Thuộc tính này cho phép chúng tôi sử dụng hình ảnh động mà chúng tôi đã tạo. Trong ví dụ này height:100px6..
• height:100px7: Như được đặt tên, nó xác định thời lượng của hình ảnh động tính bằng giây. Bạn phải chỉ định nó để khởi chạy hoạt hình. Nếu không, sẽ không có gì xảy ra.
• height:100px8: Để chỉ định độ trễ trong vài giây, hình ảnh động sẽ bắt đầu sau vài giây được xác định.
• height:100px9: Để đặt số lần hoạt hình sẽ lặp lại.
• width0: Để đặt hướng của hình ảnh động, chuyển tiếp (width1), lùi (width2) hoặc cả hai hướng (trước tiên chuyển tiếp sau đó ngược: width3 hoặc đầu tiên lùi sau đó chuyển tiếp width4).
• width5: Để đặt đường cong tốc độ của hình ảnh động. Nó có các giá trị tương tự như nó cho sự chuyển đổi ở trên.
• width6: là một thuộc tính tốc ký cho phép thiết lập chi tiết hoạt hình trong một dòng. Nó không thể đọc được như vậy, nhưng nó tiết kiệm 6 dòng mã. Một nhận xét là cần thiết cho phiên bản ngắn để các nhà phát triển khác hiểu mã làm gì.

Thí dụ

Siêu quan trọng để biết

Không phải tất cả các trình duyệt hỗ trợ tất cả các thuộc tính. Ngoài ra còn có một số thuộc tính trên giai đoạn thử nghiệm, vì vậy hãy chú ý để làm cho trang web của bạn trông và phản ứng giống nhau trên tất cả các trình duyệt (hoặc ít nhất là các trình duyệt thường được người dùng hoặc khách hàng sử dụng)

Mẹo của tôi cho vấn đề này:

Sử dụng tiền tố nhà cung cấp

• Android: width7
• Chrome, iOS, Safari: width7
• Firefox: width9
• Internet Explorer: div0
• Opera: div1

Sử dụng công cụ Caniuse

• Sử dụng công cụ siêu tốt để xác định hỗ trợ của trình duyệt cho thuộc tính CSS nếu được hỗ trợ không cần thêm tiền tố nhà cung cấp cho trình duyệt được hỗ trợ.

Đó là nó cho ngày hôm nay, xem yaa 🙋

Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào, chỉ cần nhấn bình luận hoặc liên hệ với tôi qua LinkedIn - Tôi là tất cả tai!I'm all ears!

Bạn muốn mua cho tôi một ly cà phê? ☕

Hãy để xây dựng một ’chúng tôi tốt hơn cho năm 2022!

Tìm hiểu thêm về chương trình Web Express 2022:

I- Kiến thức web chung

II- Skeleton trang web: HTML

Iii- Kiểu trang web: CSS (Chương hiện tại)

• Bộ chọn (từ cơ bản đến phức tạp)
• Mô hình hộp
• Kiểu chữ
• Định vị
• Bố cục: Flex & Grid
• Bóng tối, màu sắc và độ dốc

Chuyển đổi & Biến đổi và Hoạt hình

• Thiết kế đáp ứng (truy vấn truyền thông)

Chia sẻ chương trình với những người muốn trở thành nhà phát triển web! Điều này sẽ giúp tiếp tục tiến bộ và giúp đỡ lẫn nhau trong suốt hành trình.

Nếu bạn thích bài viết của tôi, hãy đăng ký để có được những bài mới nhất của tôi. Nếu bạn thích tự mình trải nghiệm trung bình, hãy xem xét hỗ trợ tôi và hàng ngàn nhà văn khác bằng cách thiết kế cho một thành viên. Nó chỉ có giá 5 đô la mỗi tháng, nó hỗ trợ chúng tôi, nhà văn và bạn cũng có cơ hội kiếm tiền bằng văn bản của mình. Tất nhiên, bạn có thể hủy bỏ tư cách thành viên bất cứ lúc nào. Bằng cách đăng ký với liên kết này, bạn sẽ hỗ trợ tôi trực tiếp với một phần phí của bạn, nó đã giành được chi phí cho bạn nhiều hơn. Nếu bạn làm như vậy, cảm ơn bạn một triệu lần!subscribe to get my latest ones. If you like to experience Medium yourself, consider supporting me and thousands of other writers bysigning up for a membership. It only costs $5 per month, it supports us, writers, and you have the chance to make money with your writing as well. Of course, you can cancel the membership anytime. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times!

Hãy liên lạc với Medium, LinkedIn, Facebook, Instagram, YouTube hoặc Twitter như bạn thích 😉 get in touch on Medium, Linkedin, Facebook, Instagram, YouTube, or Twitter as you like 😉

Thêm nội dung tại Plainenglish.io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi bất hòa.PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.