Chín ví dụ đơn giản về hoạt hình CSS3. Hoạt hình mượt mà của các đối tượng chỉ với CSS (5 ví dụ)

Xin chào, những người đọc thân mến. Vào ngày này, hãy nói về, đẹp, một điều thú vị như hình ảnh động CSS. Đó là, hoạt hình của các yếu tố này chỉ được thực hiện với các kiểu và không có tập lệnh nào được sử dụng ở đây.

Như bạn có thể thấy ở đây là thuộc tính : bay lượnĐiều này thay đổi phong cách của nền khi lơ lửng, trong một số ví dụ, nó phải nhất thiết phải là.

Thay đổi mượt mà trong màu của phần tử khi lơ lửng bằng cách sử dụng quá trình chuyển đổi

# Box1 (
Biên độ dưới đáy: 5px;
Màu nền: #ccc;

Đệm: 10px;
Text-Căn chỉnh: Trung tâm;
Chiều rộng: 200px;
Chiều cao: 100px;

văn bản thụt lề: 0px;
Biên giới: 1px Solid # 888;
-Moz chuyển đổi: màu nền 0,8s dễ dàng;
-O-Transition: màu nền 0,8s 0,1s dễ dàng;
-Webkit-Transition: màu nền 0,8S dễ dàng;
Con trỏ: con trỏ;)

# Box1. : bay lượn {
màu nền: # 97CE68;
Màu sắc: # 333;
}

Như bạn thấy một hình ảnh động như vậy, chúng tôi đã đạt được bằng cách sử dụng thuộc tính chuyển đổi.. Tại đây, bạn có thể thay đổi tốc độ hoạt hình trong vài giây, trong trường hợp này, nó có giá 0,8c đến một sự thay đổi hoàn toàn màu khi bạn di chuột và 0,1c trước khi hoạt hình hoạt động sau khi con trỏ được hướng dẫn và xóa. (Tôi xin lỗi vì Rebus :-)) Giá trị này có thể được thay đổi như bạn cần.

Màu của nền với thuộc tính được đặt bởi thuộc tính : bay lượn, Anh ta là bắt buộc ở đây, nếu không hoạt hình sẽ không hoạt động.

Thay đổi kích thước của phần tử

# Box2 (
Biên độ dưới đáy: 5px;
Màu nền: #ccc;
Màu sắc: # 333;

Đệm: 10px;
Text-Căn chỉnh: Trung tâm;
chiều rộng: 200px;
Chiều cao: 100px;

văn bản thụt lề: 0px;
Biên giới: 1px Solid # 888;
-Moz Chuyển đổi: Tất cả 1S tuyến tính;
-O-Transition: Tất cả 1S tuyến tính;
-Webkit-Transition: Tất cả 1S tuyến tính;
Con trỏ: con trỏ;)

# Box2. : bay lượn {
Màu nền: # 97CE68;
Màu sắc: # 000;
chiều rộng: 150px;
Chiều cao: 50px;
}

Trong ví dụ này, chúng tôi đã đạt được một sự thay đổi trơn tru trong kích thước của khối khi lơ lửng. Tiêu chuẩn 200 trên 100 giá trị, và giá trị của lơ lửng là 150 đến 50, được đặt bởi thuộc tính : bay lượn.

Ở đây bạn chỉ có thể thay đổi khối theo chiều rộng hoặc chiều cao, bạn chỉ cần : bay lượnxóa bỏ chiều rộng:- Khối chỉ thay đổi về chiều cao, chiều cao:- Đơn vị chỉ thay đổi theo chiều rộng.

Bạn cũng có thể thay đổi tốc độ thay đổi. Trong trường hợp này, nó là 1c.

Đối tượng thật

# Box3 (
Biên độ dưới đáy: 5px;
Màu nền: #ccc;
Màu sắc: # 333;

Đệm: 10px;
Text-Căn chỉnh: Trung tâm;
Chiều rộng: 200px;
Chiều cao: 100px;

văn bản thụt lề: 0px;
Biên giới: 1px Solid # 888;
-Moz chuyển đổi: tất cả các 1s 0.1s dễ dàng;
-O-Chuyển đổi: Tất cả 1s 0.1s Easter;
-Webkit-Transition: tất cả 1s 0.1s Dễ dàng vào;
Con trỏ: con trỏ;)

# Box3: di chuột (
Màu nền: # 97CE68;
Màu sắc: # 000;
-Webkit-Biến đổi: Xoay (360deg);
-Moz-Biến đổi: Xoay (360DEG);
-O-biến đổi: xoay (360deg);
}

Vụ tai nạn xảy ra với biến đổivà chuyển đổi.. Trong trường hợp này, đối tượng đang quay theo chiều kim đồng hồ dài 360 độ với tốc độ một giây. Nếu cần thiết là khối quay ngược chiều kim đồng hồ, trong biến đổiÝ nghĩa phải được đặt - (trừ). Đương nhiên, mức độ doanh thu có thể được thay đổi.

Tăng và giảm trơn tru trong đối tượng

# Box4 (
Biên độ dưới đáy: 5px;
Màu nền: #ccc;
Màu sắc: # 333;
Đệm: 10px;
Text-Căn chỉnh: Trung tâm;
Chiều rộng: 200px;
Chiều cao: 100px;

văn bản thụt lề: 0px;
Biên giới: 1px Solid # 888;
-Moz chuyển đổi: tất cả 3s dễ dàng;
-O-Transition: Tất cả 3S Dễ thở;
-Webkit-Transition: tất cả 3S dễ dàng;
Con trỏ: con trỏ;)

# Box4: Hover (
Màu nền: # 97CE68;
Màu sắc: # 000;
-Webkit-biến đổi: quy mô (2);
-Moz-biến đổi: tỷ lệ (2);
-O-biến đổi: quy mô (2);
}

Trong ví dụ này, khối tăng trơn tru gấp 2 lần. Giá trị này được trưng bày biến đổi: Quy mô (2). Nếu bạn đặt giá trị 1,5, tương ứng, khối tăng gấp 1,5 lần.

Theo cùng một cách bạn có thể giảm kích cỡ Khối, chẳng hạn như cung cấp một giá trị 0,5.

Khối bù mịn

# Box5 (
Biên độ dưới đáy: 5px;
Màu nền: #ccc;
Màu sắc: # 333;
Đệm: 10px;
Text-Căn chỉnh: Trung tâm;
Chiều rộng: 200px;
Chiều cao: 100px;

văn bản thụt lề: 0px;
Biên giới: 1px Solid # 888;
-Moz chuyển đổi: tất cả 1s dễ dàng vào;
-O-Transition: tất cả 1s dễ dàng vào;
-Webkit-Transition: tất cả 1s dễ dàng vào;
Con trỏ: con trỏ;)

# Box5: di chuột (
Màu nền: # 97CE68;
Màu sắc: # 000;
-Webkit-Biến đổi: Dịch (0,50px);
-Moz-Biến đổi: Dịch (0,50px);
-O-Biến đổi: Dịch (0,50px);
}

Ở đây, chuyển động được đặt trong pixel. Trong trường hợp này (0,50px). Bạn cũng có thể buộc khối để leo lên giá trị này 0, -50px. Hoặc theo đường chéo xuống 50px, 50px. Trong một từ, khối có thể được thực hiện thay đổi bất cứ nơi nào.

Về nguyên tắc, và tất cả mọi thứ mà tôi muốn nói. Không, không phải tất cả mọi thứ :-) Tôi quên nhắc bạn rằng hoạt hình CSS này có thể được áp dụng cho bất kỳ đối tượng nào trên trang web: Để hình ảnh, văn bản, tiêu đề, biểu tượng, v.v. Đối với các tài liệu tham khảo, một sự thay đổi màu sắc mượt mà là hoàn toàn phù hợp, trong tôi rất đẹp. :-)

Tuy nhiên, thông tin này được chia sẻ với chúng tôi shplogalkablog.ru. Vì những gì anh ấy rất cảm ơn.

Bây giờ tất cả mọi thứ là chính xác :-) Để các cuộc họp mơ hồ, bạn bè.

Trong lựa chọn này, các chip CSS tốt nhất và chất lượng cao được thu thập. Tại đây, bạn có thể gặp gỡ các bản demo khác nhau và tuyệt vời. Các ví dụ và kỹ thuật từ những người và nhà thiết kế nổi tiếng, những người cố gắng chứng minh rằng bây giờ có thể thực hiện hầu hết mọi thứ chỉ trên CSS sạch sẽ. Bạn cũng có thể gặp một số bài học ở đây trong đó nó kể chi tiết cách tạo ra như vậy. Tôi hy vọng rằng lựa chọn này sẽ hữu ích cho bạn.

CSS 3D MARDS.

Trong bản demo này, bạn có thể tạo và chỉnh sửa các đám mây kỳ quái trong 3D. Những đám mây trên CSS khiến chúng ta rõ ràng rằng khả năng của các công nghệ web thực tế vô hạn.

Logo tại CSS nguyên chất

Đây là những ví dụ về logo chỉ được thực hiện trên CSS thuần túy. Bạn chỉ cần nghĩ về việc tạo, hình ảnh không được sử dụng. Đó chỉ là một cái gì đó.

Bảng chữ cái với hình ảnh động CSS

Ví dụ tuyệt vời và nghệ thuật của việc sử dụng CSS trong bảng chữ cái

Điều hướng 3d cho trang web

Một bảng điều hướng đơn giản nhưng rất sành điệu cho trang web, tất nhiên chỉ được thực hiện chỉ bằng CSS3. Không có hình ảnh và kịch bản.

Google dudle trên css

Một trong số vô số dudles từ công cụ tìm kiếm của Google được thực hiện trên CSS. Đây là một ví dụ tuyệt vời về chất lượng sử dụng hoạt hình CSS.

Thanh trượt

Slider tốt và định tính cho hình ảnh. Cộng với 4 ví dụ trong bản demo.

Nhẫn đôi hoạt hình

Nhẫn màu cam và nhiều màu đẹp không có mã CSS lớn

Mờ trên css.

Dường như với tôi bộ lọc rất cần thiết, nó càng được thực hiện trên CSS thuần túy. Sử dụng Blur, bạn có thể thu hút sự chú ý của người dùng đến một điểm cụ thể.

Flexbox đầy đủ hướng dẫn

Bài viết này trên Khối thích ứng Flexbox. Nó được kể đầy đủ về những khối này, mặc dù một bài viết bằng tiếng Anh.

Menu đầy màu sắc và hoạt hình trên CSS3

Menu thả xuống đẹp cho trang web với các biểu tượng. Một lợi thế lớn là nó được thực hiện hoàn toàn trên CSS.

Bộ lọc CSS

Tài liệu định tính bằng tiếng Anh, mô tả việc sử dụng các bộ lọc CSS trên hình ảnh.

Hình thức css.

Đăng về các hình thức CSS với nhiều ví dụ

Thanh tiến trình trên CSS

Một bài học về cách tạo các thanh sành điệu tiến bộ trên CSS sạch và với hoạt hình. Bạn cũng có thể xem một ví dụ và tải xuống các nguồn.

Hoạt hình - Animate.css.

Hoạt hình dự án CSS phổ biến nhất trên Internet ngày nay. Và có lẽ là dễ dàng và chất lượng nhất, và ngoài miễn phí.

Chỉ báo tải - Spinkit

Tôi sẽ nói một cách trung thực, các chỉ số đã gặp nhau trên blog, nhưng dường như với tôi rằng họ nên được hiển thị lại. Vì đây là những chỉ số đẹp nhất trên Internet trên CSS.

nút

Bây giờ các nút trên CSS đã khó ngạc nhiên, nhưng đó là một lựa chọn khá tốt.

Trình tạo để tạo công tắc

Một ứng dụng internet nhỏ và chất lượng cao mà bạn có thể tạo các công tắc đẹp để sử dụng trên trang web.

Mẹo bật lên

Thư viện CSS của Mẹo bật lên miễn phí - Hint.css

Đề án màu sắc

Đề án màu sắc cho những người không thích đào mã

Xin chào tất cả mọi người. Gần đây đã vấp phải một loạt các hướng dẫn video rất hữu ích và thú vị về chủ đề " Hoạt hình CSS." Nhưng nó không đủ, tất cả các video đều bằng tiếng Anh và, và có lẽ, không phải mọi Brandymer đều biết tiếng Anh ở mức đủ để hiểu và đồng hóa tất cả các thông tin cần thiết. Do đó, tôi quyết định dịch các bài học này cho bạn (chính xác hơn tạo một bản dịch miễn phí). Đừng cảm ơn. Vì thế:

1. Hoạt hình CSS. Giới thiệu + Chuyển đổi tài sản (Bài viết này)
2. Hoạt hình CSS. Caiiframes (Keyframes) - sẽ sớm được
3. Khi nào và tại sao nên sử dụng hoạt hình CSS? - Chẳng mấy chốc nó sẽ là

Hoạt hình CSS là gì?

Trước khi cho bạn biết cách tạo hoạt hình CSS, và tại sao chúng thường cần thiết, tôi muốn bắt đầu giải thích với bạn gìHoạt hình CSS., đưa ra định nghĩa hoặc một cái gì đó.

Hoạt hình trên web theo đuổi hai ý chính. Ý tưởng đầu tiên - hồi sinh một cái gì đó. Bạn dường như với Tiến sĩ Frankenstein. Bạn có một con quái vật vô hồn, và bạn hít thở cuộc sống vào đó. Thứ hai - hình dung của phong trào. Và từ khóa ở đây là "chuyển động".

Làm thế nào để làm động?

CSS có hai công cụ chính mà chúng ta có thể di chuyển các mục trên một trang web. Đầu tiên (về nơi chúng ta vẫn sẽ nói chuyện hôm nay) - Tài sản chuyển đổi.. Trước hết, nó là với sự giúp đỡ của nó, chúng tôi tạo ra các hình ảnh động trong CSS. Công cụ thứ hai là một tài sản. hoạt hình được ghép nối với Caiframe (@Keyframes - nhân viên chủ chốt). Chúng tôi sẽ kết thúc chi tiết công cụ này trong bài học tiếp theo, và ngay bây giờ chúng tôi sẽ xem xét thuộc tính CSS Transition. Và sau đó chúng ta sẽ nói về những gì bạn cần để làm động trên trang (khi cần thiết cho người dùng) và những gì không đáng để hoạt hình (khi hình ảnh động trông thật ngu ngốc và không phù hợp), dựa trên trải nghiệm người dùng (UX - Trải nghiệm người dùng ).

Tài sản chuyển tiếp CSS - tham số và giá trị

Cú pháp

Để bắt đầu, hãy xem thuộc tính này được đọc như thế nào và chúng tôi sẽ phân tích cú pháp của nó. Chúng tôi viết tài sản này một cái gì đó như thế này:

chuyển đổi.: [bất động sản] [thời lượng.] [chức năng thời gian] [sự chậm trễ] ;

chuyển đổi.: Chiều cao 1s dễ dàng 0,2s;

Chúng tôi chỉ định thuộc tính này cho phần tử mà chúng ta muốn làm động. Yếu tố này được mịn chuyển đổi (hoặc từng bước) giữa một số trạng thái của nó (ví dụ: chiều cao 100 pixel và chiều cao 200 pixel). Và nó sẽ trông như thế nào chuyển đổi (từ quá trình chuyển đổi tiếng Anh) sẽ phụ thuộc vào các tham số mà chúng tôi đặt nó.

Các thuộc tính tham số đầu tiên (giá trị) của quá trình chuyển đổi là khác bất động sản Yếu tố hoạt hình (ví dụ: chiều cao).

Tham số thứ hai là thời lượng (thời lượng) của hoạt hình, nghĩa là, mất bao nhiêu thời gian chuyển đổi một mục từ trạng thái này sang trạng thái khác (ví dụ: 2s hoặc 2000ms).

Tham số thứ ba là chức năng thời gian [thời gianchức năng.] (Chức năng ising [ nới lỏng.chức năng.]). Cách cường độ của hoạt hình sẽ được phân phối trong toàn bộ thời gian. Ví dụ, hình ảnh động có thể bắt đầu đáng kể và ở cuối để chậm lại và hoàn thành mượt mà quá trình chuyển đổi. Có thể được sử dụng như từ khóa (ví dụ: gIẢM BỚT,giảm bớt-trong-ngoài,tuyến tính.) và các chức năng của khối lập phương bezier (ví dụ: khối.bezier (0,17, 0,67, 0,83, 0,67)). Cube Bezier Bạn có thể dễ dàng và thuận tiện cấu hình trên tài nguyên này http://cubic-bezier.com, cũng như các bước hoạt động để tạo một hình động từng bước (từng bước).

Vâng, cuối cùng, tham số sự chậm trễ. Sự chậm trễ hoạt hình là thời gian bạn cần đợi trước khi hoạt hình (trong trường hợp của chúng tôi - quá trình chuyển đổi) sẽ bắt đầu.

Ví dụ hoạt hình CSS Transition

Hãy xem xét một hoạt hình CSS ví dụ như vậy:

chuyển đổi: Opacity 300ms dễ dàng vào 1s;

Ở đây chúng tôi chỉ đòi hỏi tài sản opacity. (độ mờ). Điều này có nghĩa là nếu một mặt hàng mà chúng tôi dự định sẽ hoạt hình, có các thuộc tính khác, ví dụ, chiều cao, chiều rộng hoặc màu sắc và ngay cả khi các thuộc tính này khác nhau ở các trạng thái khác nhau của vật phẩm, sau đó chuyển đổi suôn sẻ (hoạt hình) sẽ chỉ tại thuộc tính Opacity. Bạn hiểu không?

Thay vì một tài sản cụ thể, bạn cũng có thể sử dụng từ khóa " tất cả." Điều này có nghĩa là chúng tôi hoàn toàn hoạt hình tất cả các thuộc tính của phần tử đã được thay đổi trong trạng thái mới của mục (và không chỉ độ mờ) và có thể hoạt hình cả. Bởi vì, như bạn biết, không phải tất cả các thuộc tính có thể được hoạt hình. Nhưng về nó một chút sau đó.

Tham số thứ hai ( 300 cÔ.) cho chúng ta biết rằng hình ảnh động sẽ chỉ kéo dài 300 mili giây. Đó là, phần tử sẽ nhanh chóng xuất hiện hoặc hòa tan nhanh chóng, tùy thuộc vào các giá trị của các thuộc tính trong hai trạng thái của nó.

Tính năng thời gian ( giảm bớt-trong-ngoài.) Tham số thứ ba sẽ tạo ra sự khởi đầu và kết thúc hoạt hình mượt mà.

Sự chậm trễ ( 1 s.) Cho thấy hoạt hình sẽ bị trễ bao nhiêu trước khi nó được kích hoạt.

Nói chung, đây là công thức làm thế nào chúng ta sẽ ghi lại hoạt hình chuyển tiếp. Đây là một cú pháp. Bạn, nếu bất cứ điều gì, có thể thêm nhiều hơn một [thuộc tính] chuyển đổi cho một phần tử. Ví dụ: bạn có thể hoạt hình với các tham số khác nhau, thay đổi chiều cao và chiều rộng của phần tử. Để thực hiện việc này, trong thuộc tính Chuyển đổi thay vì điểm bằng dấu phẩy ở cuối, chỉ cần đặt dấu phẩy và viết các tham số cho một thuộc tính khác. Và đừng quên đặt một điểm bằng dấu phẩy ở cuối để làm cho tất cả.

Điều gì có thể được hoạt hình trong CSS?

Trong khi chúng ta chỉ thảo luận về cú pháp của các thuộc tính chuyển tiếp. Bây giờ hãy nói về các thuộc tính mà chúng ta có thể hoạt hình và không. Bởi vì có một số điều đơn giản là không có ý nghĩa gì với Animate, và một số thuộc tính có thể đơn giản là không thể.

Thuộc tính hoạt hình

Lấy, ví dụ, các thuộc tính như vậy như:

1. cỡ chữ;
2. màu nền;
3. chiều rộng;
4. bên trái (đối với khoảng cách từ phía bên trái, phần tử có thể được di chuyển [được chỉ định] ...

Rõ ràng, nó có ý nghĩa để làm động các thuộc tính này. Nếu bạn thay đổi giá trị của chúng, nó sẽ thay đổi phần tử trực quan. Nếu bạn thay đổi kích thước phông chữ, hãy nói, từ 14 đến 28 pixel, bạn sẽ thấy rằng phông chữ đã tăng trơn tru, một hình ảnh động xảy ra kéo dài trong một thời gian. Hoạt hình luôn có ý nghĩa nếu giá trị thuộc tính rõ ràng (thường là số là số). Nếu bạn tăng kích thước phông chữ lên tới 100 pixel, thì rõ ràng bạn sẽ thấy cách các chữ cái phát triển. Thay đổi màu mượt mà trong nền cũng có thể được căn chỉnh [vì màu trong web có mã số, ví dụ, màu đỏ rGB (255,0,0)]. Những thuộc tính này là hoạt hình.

Nói chung, hãy nhớ nếu bạn tưởng tượng rằng nó hoạt hình - nó có nghĩa là nó có thể hoạt hình. Thông thường nó hoạt động.

Không phải là tài sản hoạt hình

Nhưng danh sách các thuộc tính không thể hoạt hình (ví dụ):

1. trưng bày;
2. phông chữ-gia đình;
3. chức vụ ...

Đây là một số trong số họ mà tôi lấy làm ví dụ để bạn có thể cảm nhận được sự khác biệt giữa các thuộc tính CSS hoạt hình và không hoạt hình.

Hiển thị. Bạn có thể tưởng tượng cách thay đổi giữa "sẽ trực quan trưng bày:khối; "và " trưng bày:nội tuyến-khối;"? Làm thế nào có thể xuất hiện của phần tử giữa " chức vụ:quan hệ;"Và" chức vụ:tuyệt đối;"? Không, tất nhiên, phần tử sẽ trông khác nhau khi thay đổi các thuộc tính này. Nhưng làm thế nào bạn có thể tưởng tượng chuyển đổi? Bạn không thể làm điều đó. Đúng? Bạn không thể tưởng tượng sự biến đổi của phông chữ Helvetica. trong phông chữ Georgia., mỗi chữ cái, nó chỉ không hoạt động. Bạn có thể thay đổi các phông chữ này, nhưng chúng thay đổi đáng kể, không có hoạt hình nào sẽ xảy ra.

Hiệu suất hoạt hình CSS

Nói chung, nhiều thuộc tính là hoạt hình, nhưng một số là không. Bây giờ hãy quyết định từ các thuộc tính hoạt hình tốt hơn phù hợp với hoạt hình, và những gì tồi tệ hơn. Nó sẽ là về hiệu suất. Chúng tôi đã chạm vào chủ đề của hiệu suất, bởi vì hình ảnh động là một quy trình chuyên sâu về tài nguyên.

Nói chung, đây là những thứ phù hợp nhất cho hoạt hình:

1. Định vị trên trang
2. Chia tỷ lệ.
3. Vòng xoay
4. Minh bạch

Hơn nữa, ba điểm đầu tiên của danh sách này là tất cả các cài đặt thuộc tính biến đổi (dịch, tỷ lệ, xoay). Định vị xảy ra dọc theo trục X và Y.

Nếu bạn quyết định làm động bất cứ thứ gì khác, bạn có nguy cơ không được chuyển đổi mềm và mượt mà 60 khung hình mỗi giây. Paul Lewis & Ailen

Và đây chính xác là những gì bạn quan tâm khi chúng ta nói về năng suất của hoạt hình. Nói chung, các thuộc tính phù hợp nhất cho hoạt hình là biến đổi I.opacity.. Khi hoạt hình một thứ khác, hoạt hình FPS có thể giảm xuống dưới 60fps.

Hãy tóm tắt mục này tiếp theo. Cố gắng tránh vẽ lại các mục trên trang web và các yếu tố hoạt hình mà trình duyệt khó kết xuất (ví dụ: bóng).

Làm thế nào để tạo hoạt hình trong CSS?

Bây giờ hãy đối phó với cách bắt đầu hoạt hình. Những gì bạn cần làm để yếu tố bắt đầu hoạt hình. Nói cách khác, cách tạo hoạt hình trongCss..

Nó không khó khăn và vì điều này có nhiều cách khác nhau. Nhưng có 2 nguồn điện mà bạn phải học trong bắt buộc. Cách đầu tiên là hoạt hình khi lơ lửng trên một yếu tố (Pseudo-Class: Hover). Bạn hướng dẫn chuột trên phần tử và hoạt hình được kích hoạt. Do đó, bạn có thể làm động phần tử hoặc bất kỳ công ty con nào của nó. Sau đó, tôi sẽ chỉ cho bạn cách nó hoạt động. Cách thứ hai là thay đổi lớp phần tử. Đó là, bạn có một mục thông thường, bạn thay đổi (hoặc thêm) lớp của nó trên một lớp có nhiều kiểu hoàn toàn khác nhau. Nếu thêm một lớp sẽ xảy ra và nếu bạn xóa lớp, hoạt hình ngược sẽ xảy ra. Đây là một cách tốt để các menu hình động hoặc danh sách thả xuống.

Lời nói

Chúng tôi đã xem xét mọi thứ chúng ta cần để tạo hoạt hình trên CSS thuần túy. Rất sớm, chúng tôi sẽ phân tích các ví dụ thực tế, và một lát sau - những ví dụ rất thú vị.

Bạn đã đọc cho đến cuối cùng?

Điều này có hữu ích không?

Ồ không

Chính xác thì bạn không thích gì? Bài báo không đầy đủ hay không trung thực?
Viết trong Climmenia và chúng tôi hứa sẽ sửa!

Hoạt hình CSS3 được sử dụng rộng rãi. Đã đến lúc tìm ra ngay cả những người mới bắt đầu nhất của các nhà xây dựng trang web. Hoạt hình CSS là gì và cách tạo nó. Có lẽ bạn nghĩ rằng hình ảnh động CSS3 là làm cho các khối di chuyển và nó trông giống như một phim hoạt hình. Nhưng hoạt hình CSS không chỉ là chuyển động của một mục từ điểm này đến điểm khác, và đây vẫn là biến dạng và biến đổi khác. Để làm cho nó rõ ràng ngay cả đối với người mới bắt đầu - tôi đã vẽ mọi thứ theo các bước.

1. Tính chất cơ bản Hoạt hình CSS3

Một khối lý thuyết nhỏ mà từ đó bạn sẽ hiểu thuộc tính CSS3 nào chịu trách nhiệm cho hoạt hình, cũng như những giá trị họ có thể thực hiện.

• tên hoạt hình. - Một tên duy nhất của hình ảnh động (khung chính, nói về chúng ngay bên dưới).
• thời lượng hoạt ảnh. - Thời lượng hoạt hình trong vài giây.
• chức năng hoạt hình-thời gian - Thay đổi tốc độ hoạt hình. Thoạt nhìn nó rất khó hiểu. Nó luôn luôn dễ dàng hơn để hiển thị trong ví dụ, và bạn sẽ thấy chúng dưới đây. Có thể lấy các giá trị sau: tuyến tính | Dễ thôi |. Dễ dàng trong | Dễ dàng | Khối bezier (n, n, n, n).
• sự chậm trễ hoạt hình. - Trì hoãn trong vài giây trước khi bắt đầu hoạt hình.
• hoạt hình-đếm-đếm - Số lượng hình ảnh động lặp lại. Nó được đặt chỉ là một số hoặc bạn có thể chỉ định vô hạn và hình ảnh động sẽ được thực hiện vô hạn.

Dưới đây chỉ là các thuộc tính cơ bản là quá đủ để tạo hoạt hình đầu tiên của họ trên CSS3.

Điều cuối cùng chúng ta cần biết và hiểu lý thuyết là làm thế nào để tạo nhân sự quan trọng. Nó cũng dễ dàng để thực hiện điều này bằng cách sử dụng các quy tắc @KeyFrames trong đó nhân viên chính được chỉ định. Cú pháp của quy tắc này như sau:

Ở trên, chúng tôi đã hỏi khung đầu tiên và cuối cùng. Tất cả các trạng thái trung gian sẽ tính toán tự động!

2. Ví dụ thực về hoạt hình CSS3

Lý thuyết như thường lệ là nhàm chán và không phải lúc nào cũng rõ ràng. Sẽ dễ dàng hơn nhiều để xem tất cả mọi thứ trong ví dụ thực tế, và tốt nhất là làm cho nó trên một trang HTML thử nghiệm.

Khi học ngôn ngữ lập trình, chương trình "Xin chào, thế giới!" Thường được viết, có thể hiểu được cú pháp của ngôn ngữ này và một số thứ cơ bản khác. Nhưng chúng tôi học không phải là ngôn ngữ lập trình, mà là ngôn ngữ của sự xuất hiện của tài liệu. Do đó, chúng tôi sẽ có "Xin chào" của riêng bạn, thế giới! ".

Đây là những gì chúng tôi sẽ làm ví dụ: Hãy để chúng tôi có một số khối