Ví dụ hoạt hình Css. Bảng chữ cái với hoạt ảnh CSS

Trước khi CSS3 ra đời, từ “hoạt hình” đã khiến các nhà thiết kế bố cục phải đổ mồ hôi lạnh. Và tất cả bởi vì vào thời đó để tạo ra chất lượng cao và hoạt hình đẹp không phải là một nhiệm vụ tầm thường. CSS không thể làm điều này nên tất cả hoạt ảnh đều được thực hiện bằng JavaScript. Cần phải sàng lọc qua một loạt diễn đàn, tìm những người đồng đội gặp bất hạnh, dành nhiều thời gian cho việc phát triển và cuối cùng nhận được phản hồi từ nhà thiết kế: “Được rồi, điều này sẽ làm được”. Và khi CSS3 cuối cùng cũng ra mắt, pháo hoa vẫn chưa ngừng cho đến tận sáng, rượu sâm panh chảy như sông. Đó là một ngày tuyệt vời đối với tất cả các nhà phát triển web (ngày hôm sau là ngày Microsoft thông báo chấm dứt hỗ trợ trình duyệt web IE). Với sự ra đời của CSS3, nhiều nhiệm vụ phức tạpđã trở nên đơn giản và dễ chịu khi làm việc. Điều tương tự cũng áp dụng cho hoạt ảnh trong CSS mà tôi sẽ nói đến trong bài viết này.

Chuyển đổi CSS

Chuyển đổi CSS cho phép bạn thực hiện các thay đổi đối với các thuộc tính CSS một cách trơn tru và theo thời gian. Bằng cách này, bạn có cơ hội kiểm soát quá trình chuyển đổi của một phần tử từ trạng thái này sang trạng thái khác. Hãy bắt đầu với ví dụ đơn giản nhất và tiếp tục.

Khi bạn di con trỏ qua hình vuông, màu nền sẽ thay đổi mượt mà.

Bây giờ chúng ta hãy xem xét kỹ hơn cách quản lý chuyển tiếp trong CSS. Chúng tôi chỉ có 5 thuộc tính cho phép chúng tôi kiểm soát hoạt ảnh chuyển tiếp:

• thuộc tính chuyển tiếp;
• thời gian chuyển tiếp;
• chức năng chuyển đổi thời gian;
• độ trễ chuyển tiếp;
• chuyển tiếp;

thuộc tính chuyển tiếp- chỉ định danh sách các thuộc tính sẽ có hình động; các thuộc tính không được chỉ định ở đây sẽ được sửa đổi như bình thường. Bạn có thể tạo hiệu ứng động cho tất cả thuộc tính cho một phần tử cụ thể bằng cách chỉ định giá trị all. Nếu bạn không chỉ định bất kỳ thuộc tính nào thì giá trị mặc định là tất cả.

Thuộc tính chuyển tiếp: chiều rộng;

thời gian chuyển tiếp- đặt thời lượng của hoạt ảnh; thời gian có thể được chỉ định bằng giây hoặc mili giây.

Thời gian chuyển tiếp: 1 giây;

chức năng chuyển đổi thời gian- chức năng thời gian, cho biết các điểm tăng tốc và giảm tốc cho Thời kỳ nhất định thời gian để kiểm soát những thay đổi về tốc độ hoạt ảnh. Nói một cách đơn giản, bạn có thể sử dụng thuộc tính này để chỉ định hành vi cho hoạt ảnh. Ví dụ: chúng ta có thể tăng tốc độ hoạt ảnh ở đầu và làm chậm nó ở cuối hoặc ngược lại. Đường cong Bezier được sử dụng để xác định quá trình hoạt hình. Nói chung, chức năng chuyển đổi thời gian cho phép bạn làm được rất nhiều việc hành vi khác nhauđối với hoạt hình, đây là toàn bộ chủ đề của một bài viết nên chúng ta sẽ không đi sâu hơn ở đây.

Chức năng chuyển đổi thời gian: khối-bezier(0, 0, 1, 1);

độ trễ chuyển tiếp- đặt độ trễ thời gian trước khi bắt đầu hoạt ảnh, có thể được chỉ định bằng giây hoặc mili giây.

Độ trễ chuyển tiếp: 500ms;

chuyển tiếp- Cái này tài sản chung, cho phép bạn liệt kê bốn thuộc tính đầu tiên theo thứ tự: thuộc tính, thời lượng, chức năng thời gian, độ trễ.

Chuyển tiếp: màu nền 1s khối bezier(0, 0, 1, 1) 500ms;

Chúng tôi có hoạt ảnh đơn giản này: khi bạn di chuột qua hình vuông, chiều rộng sẽ thay đổi; thời lượng hoạt ảnh là một giây; hoạt hình tiếp tục hàm tuyến tính; độ trễ trước khi hoạt ảnh bắt đầu 500 mili giây.

VỚI sử dụng CSS quá trình chuyển đổi có thể tạo hoạt ảnh cho hầu hết tất cả các thuộc tính và tạo ra nhiều hoạt ảnh thú vị, đẹp mắt, có chức năng và thậm chí phức tạp sẽ bổ sung và nâng cao dự án của bạn. Ví dụ: tôi đã tạo Material-FAB ​​​​này trên CSS thuần túy sử dụng chuyển tiếp:

Hoạt ảnh CSS

Hoạt ảnh CSS cho phép bạn tạo các hoạt ảnh phức tạp hơn so với chuyển tiếp CSS. Toàn bộ bí mật nằm trong @keyframes. Quy tắc @keyframes cho phép bạn tạo hoạt ảnh bằng cách sử dụng một tập hợp các khung chính, nghĩa là nó mô tả trạng thái của một đối tượng tại một thời điểm nhất định. Hãy xem xét một ví dụ đơn giản.

Vòng tròn của chúng tôi đã trở nên sống động và nó dường như đang rung động.

Có 9 thuộc tính cho phép bạn kiểm soát hoạt ảnh CSS:

• tên hoạt hình;
• Thời lượng hoạt ảnh;
• chức năng hoạt hình-thời gian;
• độ trễ hoạt hình;
• hoạt hình-lặp-đếm;
• hướng hoạt hình;
• hoạt hình-chơi-trạng thái;
• chế độ điền hoạt hình;
• hoạt hình;

tên hoạt hình- đây là tên của hoạt ảnh liên kết quy tắc @keyframes với bộ chọn.

Tên hoạt hình: hoạt hình của tôi; @keyframes hoạt hình của tôi ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )

hoạt hình-lặp-đếm- đặt số lần lặp lại của hoạt ảnh, giá trị mặc định là 1. Giá trị vô hạn có nghĩa là hoạt ảnh sẽ phát không ngừng.

Số lần lặp hoạt ảnh: 2;

hướng hoạt hình- đặt hướng của hình ảnh động.

Hướng hoạt hình: đảo ngược;

hoạt hình-chơi-trạng thái - tài sản nàyđiều khiển dừng và phát hoạt ảnh. Có hai giá trị, đang chạy (hoạt ảnh phát theo mặc định) và bị tạm dừng (dừng hoạt ảnh).

Trạng thái phát hoạt ảnh: đã tạm dừng;

chế độ điền hoạt ảnh- đặt thuộc tính CSS nào sẽ được áp dụng cho đối tượng trước hoặc sau hoạt ảnh. Có thể nhận các giá trị sau:

• không có - các thuộc tính CSS hoạt hình sẽ chỉ được áp dụng cho đối tượng khi hoạt ảnh đang phát và sau khi hoàn thành, đối tượng sẽ trở về trạng thái ban đầu;
• chuyển tiếp - các thuộc tính CSS hoạt hình sẽ được áp dụng cho đối tượng sau khi hoạt ảnh phát xong;
• ngược - các thuộc tính CSS hoạt hình sẽ được áp dụng cho đối tượng trước khi hoạt ảnh bắt đầu phát;
• cả hai - thuộc tính CSS hoạt hình sẽ được áp dụng cho đối tượng cả trước và sau khi hoạt ảnh kết thúc;

Chế độ điền hoạt ảnh: ngược;

Của cải Thời lượng hoạt ảnh, chức năng hoạt hình-thời gian, độ trễ hoạt hình Chúng hoạt động theo cách tương tự như các thuộc tính tương tự trong quá trình chuyển đổi CSS mà tôi đã viết trước đó, vì vậy tôi sẽ không lặp lại chúng.

Với CSS hoạt hình, bạn có thể tạo các hoạt ảnh khá phức tạp mà không cần sử dụng JavaScript. Một ví dụ nổi bật- đây là các trình tải, nghĩa là các phần tử cho thấy nội dung nào đó đang tải trên trang của bạn. Dưới đây là một số ví dụ:

Mô-đun đường dẫn chuyển động

CSS Mô-đun đường dẫn chuyển động cho phép bạn tạo chuyển động của các đối tượng dọc theo một đường dẫn thông qua thuộc tính đường dẫn chuyển động đặc biệt. Trước đây, hoạt ảnh như vậy chỉ có thể được thực hiện bằng sử dụng SVG hoặc các kịch bản phức tạp.

Đặc tả này có 3 thuộc tính:

• quỹ đạo di chuyển của vật thể trong đồ hoạ vi tính;
• bù chuyển động;
• chuyển động quay;

quỹ đạo di chuyển của vật thể trong đồ hoạ vi tính- thuộc tính này cho phép bạn chỉ định các điểm (tọa độ) mà đối tượng sẽ di chuyển dọc theo. Cú pháp giống như thuộc tính đường dẫn SVG.

Đường chuyển động: path("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

sự bù chuyển động- thuộc tính này làm cho một vật chuyển động từ điểm đầu đến điểm cuối. Nó chấp nhận chiều dài gấp đôi hoặc tỷ lệ phần trăm. Để đối tượng bắt đầu di chuyển, bạn cần xác định hoạt ảnh sẽ đi từ 0 đến 100%.

@keyframes máy bay bay ( 0% ( bù chuyển động: 0; ) 100% ( bù chuyển động: 100%; ) )

chuyển động quay- Thuộc tính này cho phép bạn chỉ định đối tượng sẽ di chuyển về phía nào. Bạn có thể chỉ định giá trị tự động, đảo ngược hoặc giá trị của riêng bạn theo độ ("-45deg", "30deg", v.v.).

Chuyển động quay: tự động;

Thật không may, motion-path hiện chỉ được hỗ trợ trong Chrome và Opera, nhưng hãy hy vọng rằng các trình duyệt khác sẽ sớm làm theo ví dụ của họ, vì tính năng này thực sự hữu ích.

Đối với những người chưa hiểu cách thức hoạt động của nó hoặc muốn hiểu rõ hơn về nó, tôi đã làm một ví dụ (liên kết tới codeopen).

Hoạt hình CSS3 Cung cấp cho các trang web sự năng động. Nó làm cho các trang web trở nên sống động, cải thiện trải nghiệm người dùng. Không giống như chuyển tiếp CSS3, việc tạo hoạt ảnh dựa trên khung hình chính, cho phép bạn tự động phát và lặp lại các hiệu ứng trong một thời gian nhất định, cũng như dừng hoạt ảnh trong một vòng lặp.

Hoạt ảnh CSS3 có thể được sử dụng cho hầu hết tất cả các phần tử html, cũng như các phần tử giả:trước và:sau. Danh sách các thuộc tính hoạt hình được đưa ra trên trang. Khi tạo hoạt ảnh, đừng quên vấn đề có thể xảy ra với hiệu suất, vì việc thay đổi một số thuộc tính đòi hỏi nhiều tài nguyên.

Giới thiệu về Hoạt hình CSS

Hỗ trợ trình duyệt

I E: 10.0
Firefox: 16.0, 5.0 -moz-
Trình duyệt Chrome: 43.0, 4.0 -webkit-
Cuộc đi săn: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
Safari của iOS: 9, 7.1 -webkit-
Opera Mini: —
Trình duyệt Android: 44, 4.1 -webkit-
Trình duyệt Chrome dành cho Android: 44

1. Quy tắc @keyframes

Việc tạo hoạt ảnh bắt đầu bằng việc cài đặt khung chính quy tắc @keyframes. Các khung xác định thuộc tính nào sẽ được tạo hiệu ứng ở bước nào. Mỗi khung có thể bao gồm một hoặc nhiều khối khai báo của một hoặc nhiều cặp thuộc tính và giá trị. Quy tắc @keyframes chứa tên hoạt ảnh của phần tử, liên kết quy tắc và khối khai báo của phần tử.

@keyframes bóng ( từ (text-shadow: 0 0 3px đen;) 50% (text-shadow: 0 0 30px đen;) đến (text-shadow: 0 0 3px đen;) )

Các khung hình chính được tạo bằng cách sử dụng từ khóa from và to (tương đương với các giá trị 0% và 100%) hoặc sử dụng điểm phần trăm, có thể được chỉ định bao nhiêu tùy thích. Cũng có thể được kết hợp từ khóa và điểm phần trăm. Nếu các khung có cùng thuộc tính và giá trị, chúng có thể được kết hợp thành một khai báo:

@keyframes di chuyển ( từ, đến ( top: 0; left: 0; ) 25%, 75% (top: 100%;) 50% (top: 50%;) )

Nếu khung 0% hoặc 100% không được chỉ định thì trình duyệt của người dùng sẽ tạo chúng bằng cách sử dụng các giá trị được tính toán (được đặt ban đầu) của thuộc tính hoạt ảnh. Nếu hai khung hình chính có cùng bộ chọn, khung hình tiếp theo sẽ hủy khung hình trước đó.

Khi quy tắc @keyframes được khai báo, chúng ta có thể tham chiếu nó trong thuộc tính animation:

H1 ( cỡ chữ: 3,5em; màu sắc: màu đỏ sẫm; hình ảnh động: bóng 2s dễ dàng ra vào vô hạn; )

Không nên tạo hiệu ứng động cho các giá trị không phải là số (hiếm khi có ngoại lệ), vì kết quả trong trình duyệt có thể không thể đoán trước được. Bạn cũng không nên tạo khung hình chính cho các giá trị thuộc tính không có điểm giữa, chẳng hạn như giá trị thuộc tính color: pink và color: #ffffff , width: auto và width: 100px , hoặc border-radius: 0 và border- bán kính: 50% (trong trường hợp này, việc chỉ định bán kính đường viền: 0% là đúng.

2. Tên hoạt hình tên hoạt hình

Thuộc tính chỉ định tên của hoạt ảnh. Tên hoạt ảnh được tạo theo quy tắc @keyframes. Bạn nên sử dụng tên phản ánh bản chất của hoạt ảnh và bạn có thể sử dụng một hoặc nhiều từ được liên kết với nhau bằng dấu cách - hoặc ký tự gạch dưới _. Tài sản không được thừa kế.

Cú pháp

Div (tên hoạt hình: mymove;)

3. Thời lượng hoạt ảnh animation-duration

Thuộc tính đặt thời lượng của hoạt ảnh, được đặt bằng giây hoặc mili giây, không cho phép giá trị âm. Không được thừa kế. Nếu có nhiều hoạt ảnh được chỉ định cho một phần tử, bạn có thể đặt thời điểm khác nhauđối với mỗi giá trị, liệt kê các giá trị được phân tách bằng dấu phẩy.

Cú pháp

Div (thời lượng hoạt ảnh: 2 giây;)

4. Chức năng định thời gian hoạt hình-thời gian-chức năng

Thuộc tính xác định sự thay đổi tốc độ từ đầu đến cuối hoạt ảnh bằng cách sử dụng các hàm định giờ. Được chỉ định bằng cách sử dụng từ khóa hoặc đường cong Bezier (x1, y1, x2, y2) . Không được thừa kế.

Cú pháp

Div (hoạt hình-thời gian-chức năng: tuyến tính;)

Bằng cách sử dụng hoạt hình từng bước có thể được tạo ra hiệu ứng thú vị, chẳng hạn như văn bản đang được in hoặc chỉ báo đang tải.

5. Hoạt ảnh có độ trễ animation-delay

Thuộc tính bỏ qua hoạt ảnh trong một khoảng thời gian nhất định, điều này giúp có thể chạy từng hoạt ảnh riêng biệt. Độ trễ âm bắt đầu hoạt ảnh từ một điểm nhất định trong chu kỳ của nó, tức là. kể từ thời điểm được chỉ định trong độ trễ. Điều này cho phép bạn áp dụng hoạt ảnh cho nhiều phần tử dịch pha bằng cách chỉ thay đổi thời gian trễ.

Để làm cho hoạt ảnh bắt đầu từ giữa, bạn cần đặt độ trễ âm bằng một nửa thời gian được đặt trong animation-duration . Không được thừa kế.

Cú pháp

Div (độ trễ hoạt ảnh: 2 giây;)

6. Lặp lại hoạt ảnh hoạt hình-lặp-đếm

Thuộc tính cho phép bạn chạy hoạt ảnh nhiều lần. Giá trị 0 hoặc bất kỳ số âm nào sẽ loại bỏ hoạt ảnh đang phát. Không được thừa kế.

Cú pháp

Div (hoạt hình-số lần lặp: 3;)

7. Chỉ đạo hoạt hình

Thuộc tính chỉ định hướng lặp lại hoạt ảnh. Nếu hoạt ảnh chỉ lặp lại một lần thì thuộc tính này không có ý nghĩa. Không được thừa kế.

Cú pháp

Div (hướng hoạt hình: thay thế;)

8. Ghi lại hoạt ảnh ngắn gọn

Tất cả các tham số phát lại hoạt ảnh có thể được kết hợp trong một thuộc tính - animation , liệt kê chúng cách nhau bằng dấu cách:

Hoạt hình: hoạt hình-tên hoạt hình-thời lượng hoạt hình-thời gian-chức năng hoạt hình-độ trễ hoạt hình-lặp-đếm hoạt hình-hướng;

Để phát hoạt ảnh, chỉ cần chỉ định hai thuộc tính - animation-name và animation-duration là đủ, các thuộc tính còn lại sẽ lấy giá trị mặc định của chúng. Thứ tự liệt kê các thuộc tính không quan trọng, điều duy nhất là thời gian thực hiện của animation-duration phải đến trước độ trễ animation-delay.

9. Chơi hoạt hình animation-play-state

Thuộc tính kiểm soát việc phát lại và dừng hoạt ảnh. Có thể dừng hoạt ảnh bên trong một vòng lặp bằng cách sử dụng thuộc tính này trong Tập lệnh JavaScript. Bạn cũng có thể dừng hoạt ảnh khi di chuột qua một đối tượng - state:hover . Không được thừa kế.

Cú pháp

Div: di chuột (trạng thái phát hoạt hình: đã tạm dừng;)

10. Trạng thái của phần tử trước và sau khi phát animation-fill-mode

Thuộc tính xác định thứ tự áp dụng các kiểu được xác định trong @keyframes cho đối tượng. Không được thừa kế.

Xin chào các độc giả thân mến. Hôm nay, chúng ta hãy nói về một thứ khá thú vị được gọi là hoạt hình CSS. Nghĩa là, hoạt ảnh của các phần tử này chỉ được thực hiện bằng cách sử dụng 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, có một thuộc tính ở đây :bay lượn, thay đổi kiểu nền khi di chuột; trong một số ví dụ, điều này là bắt buộc.

Thay đổi mượt mà màu của một phần tử khi di chuột bằng cách sử dụng chuyển đổi

#hộp1 (
lề dưới: 5px;
màu nền: #ccc;

phần đệm: 10px;
căn chỉnh văn bản: giữa;
chiều rộng: 200px;
chiều cao: 100px;

thụt lề văn bản: 0px;
đường viền: 1px liền khối #888;
-moz-transition: màu nền dễ dàng 0,8 giây 0,1 giây;
-o-transition: màu nền dễ dàng 0,8s 0,1s;
-webkit-transition: màu nền 0,8 giây 0,1 giây dễ dàng;
con trỏ: con trỏ;)

#hộp1 :bay lượn {
màu nền: #97CE68;
màu: #333;
}

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

Màu nền khi di chuột được đặt làm thuộc tính :bay lượn, nó được yêu cầu ở đây, nếu không hoạt ảnh sẽ không hoạt động.

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

#hộp2 (
lề dưới: 5px;
màu nền: #ccc;
màu: #333;

phần đệm: 10px;
căn chỉnh văn bản: giữa;
chiều rộng: 200px;
chiều cao: 100px;

thụt lề văn bản: 0px;
đường viền: 1px liền khối #888;
-moz-transition: 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ỏ;)

#hộp2 :bay lượn {
màu nền: #97CE68;
màu: #000;
chiều rộng: 150px;
chiều cao:50px;
}

Trong ví dụ này chúng ta đã đạt được thay đổi suôn sẻ kích thước khối khi di chuột. Giá trị tiêu chuẩn là 200 x 100 và giá trị di chuột là 150 x 50, được chỉ định bởi thuộc tính :bay lượn.

Tại đây bạn cũng có thể thay đổi khối chỉ theo chiều rộng hoặc chiều cao, bạn chỉ cần :bay lượn xóa bỏ chiều rộng:— khối chỉ thay đổi về chiều cao, chiều cao:— khối chỉ thay đổi về chiều rộng.

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

Sự xoắn của vật thể

#hộp3 (
lề dưới: 5px;
màu nền: #ccc;
màu: #333;

phần đệm: 10px;
căn chỉnh văn bản: giữa;
chiều rộng: 200px;
chiều cao: 100px;

thụt lề văn bản: 0px;
đường viền: 1px liền khối #888;
-moz-transition: tất cả 1 giây 0,1 giây dễ dàng;
-o-transition: tất cả 1 giây 0,1 giây dễ dàng;
-webkit-transition: tất cả 1 giây 0,1 giây dễ dàng;
con trỏ: con trỏ;)

#box3:di chuột (
màu nền: #97CE68;
màu: #000;
-webkit-transform: xoay (360deg);
-moz-transform: xoay (360deg);
-o-transform: xoay (360deg);
}

Sự xoắn xảy ra bằng cách sử dụng biến đổi Và chuyển tiếp. Trong trường hợp này, vật quay theo chiều kim đồng hồ 360 độ với tốc độ một giây. Nếu bạn muốn khối quay ngược chiều kim đồng hồ, biến đổi giá trị phải được đặt thành - (trừ). Đương nhiên, mức độ quay có thể được thay đổi.

Phóng to và thu nhỏ một đối tượng một cách mượt mà

#hộp4 (
lề dưới: 5px;
màu nền: #ccc;
màu: #333;
phần đệm: 10px;
căn chỉnh văn bản: giữa;
chiều rộng: 200px;
chiều cao: 100px;

thụt lề văn bản: 0px;
đường viền: 1px liền khối #888;
-moz-transition: dễ dàng thực hiện cả 3 giây;
-o-transition: dễ dàng thực hiện cả 3 giây;
-webkit-transition: dễ dàng thực hiện cả 3 giây;
con trỏ: con trỏ;)

#box4:di chuột (
màu nền: #97CE68;
màu: #000;
-webkit-transform: tỷ lệ (2);
-moz-transform: tỷ lệ (2);
-o-transform: tỷ lệ (2);
}

Trong ví dụ này, khối tăng kích thước một cách trơn tru lên 2 lần. Giá trị này được đặt biến đổi: tỷ lệ(2). Nếu bạn đặt giá trị thành 1,5, khối sẽ được phóng to lên 1,5 lần.

Theo cách tương tự bạn có thể giảm kích cỡ khối, ví dụ đặt giá trị thành 0,5.

Chuyển khối mượt mà xuống

#hộp5 (
lề dưới: 5px;
màu nền: #ccc;
màu: #333;
phần đệm: 10px;
căn chỉnh văn bản: giữa;
chiều rộng: 200px;
chiều cao: 100px;

thụt lề văn bản: 0px;
đường viền: 1px liền khối #888;
-moz-transition: tất cả 1s dễ dàng ra vào;
-o-transition: tất cả 1s easy-in-out;
-webkit-transition: tất cả 1s dễ dàng ra vào;
con trỏ: con trỏ;)

#box5:di chuột (
màu nền: #97CE68;
màu: #000;
-webkit-transform: dịch (0,50px);
-moz-transform: dịch (0,50px);
-o-transform: dịch (0,50px);
}

Ở đây chuyển động được chỉ định bằng pixel. Trong trường hợp này (0,50px). Bạn cũng có thể làm cho khối tăng lên với giá trị 0,-50px này. Hoặc theo đường chéo xuống 50px,50px. Nói một cách dễ hiểu, khối có thể được thực hiện để di chuyển đến bất cứ đâu.

Về cơ bản đó là tất cả những gì tôi muốn nói. Không, không phải tất cả :-) Tôi quên nhắc bạn rằng hoạt ả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 liên kết, sự thay đổi màu sắc mượt mà là hoàn hảo; :-)

Ngoài ra, thông tin này đã được trang web shpargalkablog.ru chia sẻ với chúng tôi. Tôi cảm ơn anh ấy rất nhiều.

Bây giờ đó là tất cả chắc chắn :-) Hẹn gặp lại các bạn.

Phần lớn những gì mang lại cho chúng ta niềm vui trong hoạt hình đều đến từ việc di chuyển xung quanh màn hình các đồ vật khác nhau. Các hiệu ứng CSS di chuột thu hút sự chú ý của người dùng đến nội dung, một phần nhất định của giao diện và cải thiện nhận thức tổng thể về tài nguyên.

Di chuyển xung quanh có thể hơi điên rồ, như thế này:

Sự chuyển động có thể không quá rõ ràng. Ví dụ: hình xuất hiện khi bạn di chuột qua một trong các ô vuông trong hình bên dưới:

Trình duyệt của bạn không hỗ trợ khung nội tuyến hoặc hiện được định cấu hình để không hiển thị khung nội tuyến.

Trong các ví dụ đã cho, chuyển động được thực hiện bằng CSS. Cả chuyển đổi hoạt ảnh và CSS đều khiến việc chuyển từ tĩnh sang chuyển động trở nên cực kỳ dễ dàng. Nhưng bất chấp sự đơn giản này, vẫn có một số sắc thái nhất định cần được tính đến để di chuột CSS Hiệu ứng di chuột hoạt động trơn tru. Trong bài viết này tôi sẽ cho bạn biết chính xác về họ.

Chuyển đổi với Translate3d()

Khi bạn di chuyển một phần tử, nó sẽ theo chiều dọc và vị trí nằm ngang. Có một số Thuộc tính CSS, được sử dụng cho việc này. Nhưng tôi muốn khuyên bạn nên sử dụng hàm Translate3d của thuộc tính biến đổi thay vì lề, phần đệm, trái, trên cùng thông thường vì nó mang lại hình ảnh động mượt mà hơn.

Hàm Translate3d có ba đối số, nhưng trước tiên hãy xem những đối số chịu trách nhiệm di chuyển nội dung theo chiều ngang và chiều dọc:

Đối số X chỉ định chuyển động ngang, Y – chuyển động dọc. Ví dụ: nếu bạn muốn di chuyển nội dung sang phải 20 pixel trở lên, hàm Translate3d sẽ trông như thế này:

Foo ( biến đổi: Translate3d(20px, 20px, 0px); )

Chúng ta sẽ không xem xét đối số thứ ba xác định chuyển động dọc theo trục Z. Vì chúng tôi quan tâm đến hiệu ứng CSS di chuột 2d.

Như bạn có thể thấy, hàm Translate3d không đặc biệt phức tạp. Tiếp theo chúng ta sẽ xem cách sử dụng nó trong hoạt ảnh CSS để tạo chuyển động.

Chuyển tiếp

Để sử dụng thuộc tính này trong quá trình chuyển đổi, có hai bước. Trước tiên, bạn cần chỉ định biến đổi làm thuộc tính sẽ theo dõi quá trình chuyển đổi:

PictureContainer img ( vị trí: tương đối; top: 0px; transition: biến đổi .2s dễ dàng ra vào; )

Khi bạn đã xác định quá trình chuyển đổi, bạn có thể đặt thuộc tính biến đổi bằng hàm Translate3d:

PictureContainer img:hover ( biến đổi: Translate3d(0px, -150px, 0px); )

Như trong ví dụ ở đầu bài, hiệu ứng di chuột CSS khi di con trỏ chuột lên bất kỳ phần tử nào sẽ khiến hình ảnh dịch chuyển lên trên 150 pixel.

Hoạt hình

Trong trường hợp hoạt ảnh, hãy đảm bảo rằng các khung hình chính trong @keyframes chứa thuộc tính biến đổi với Translate3d :

@keyframes bobble ( 0% ( Transform: Translate3d(50px, 40px, 0px); animation-timing-function:ease-in; ) 50% ( Transform: Translate3d(50px, 50px, 0px); animation-timing-function: easy -out; ) 100% ( biến đổi: Translate3d(50px, 40px, 0px); ) )

Ví dụ từ bài viết chứa mọi thứ bạn cần để xem hiệu ứng di chuột CSS cho bố cục bảng hoạt động như thế nào.

Đừng quên tiền tố

Để đánh dấu hoạt động trong các trình duyệt khác nhau, hãy đảm bảo sử dụng tiền tố của nhà cung cấp hoặc thư viện --prefix-free cho thuộc tính biến đổi.

Chuyển đổi với JavaScript

Bạn cũng có thể tạo hoạt ảnh chuyển động bằng JavaScript. Các quy tắc tương tự được áp dụng ở đây. Trước tiên, bạn cần đặt vị trí bằng cách sử dụng Transform Translate3d, nhưng trong JavaScript thì việc này phức tạp hơn một chút.

Đoạn mã cần thiết cho việc này trông như thế này:

hàm getSupportedPropertyName(properties) ( for (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; } var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var item = document.querySelector("#theItem"); var transformProperty = getSupportedPropertyName(transform); if (transformProperty) { item.style = translate3d(someValueX, someValueY, 0px); }

Mã này có vẻ phức tạp vì chúng tôi đang sử dụng tiền tố và kiểm tra để khớp với phiên bản của hàm biến đổi đang được sử dụng.

Tại sao việc chúng ta thiết lập một vị trí với sử dụng ký quỹ, trên cùng , bên trái , v.v.?

Trừ khi bạn có lý do cụ thể để làm như vậy, đừng sử dụng CSS để tạo hiệu ứng di chuột. thuộc tính lề, phần đệm , trên , trái , dưới hoặc phải . Mặc dù điều này có vẻ phản trực giác. Hãy để tôi làm rõ...

Tính toán không cần thiết

Khi bạn thay đổi bộ giá trị cho sáu thuộc tính CSS mà tôi vừa liệt kê, trình duyệt sẽ thực hiện các tính toán bổ sung về cách nó sẽ xuất hiện trong bố cục của toàn bộ trang. Tôi không phản đối việc sử dụng các thuộc tính này cho công việc bố trí. Nhưng sử dụng chúng trong hoạt ảnh hoặc chuyển tiếp và thay đổi giá trị sáu mươi lần mỗi giây là quá nhiều.

Bạn có thể đặt vị trí của phần tử bạn đang di chuyển tới cố định hoặc tuyệt đối. Điều này sẽ giúp trình duyệt không phải tính toán bố cục cho toàn bộ tài liệu. Nhưng trong trường hợp này, trình duyệt vẫn thực hiện các phép tính trên phần tử chuyển động. Và kết quả của việc sử dụng Translate3d sẽ không nhất thiết giống với kết quả thu được khi sử dụng lề, phần đệm, v.v. Hơn nữa, như bạn sẽ thấy trong phần tiếp theo, chúng sẽ không giống nhau 100%.

Tăng tốc phần cứng

Khi chúng ta xử lý việc hiển thị các phần tử trên màn hình, các phép tính liên quan có thể được thực hiện bằng bộ xử lý hoặc card màn hình. Nếu không có tạo CSS hiệu ứng di chuột để bố trí bảng tốt hơn là sử dụng card màn hình:

GPU chỉ được thiết kế để xử lý các tác vụ liên quan đến hiển thị. Đồng thời, bộ xử lý xử lý song song số lượng lớn Các nhiệm vụ khác nhau. Và để ảnh động của bạn hiển thị mượt mà thì bạn không thể bỏ qua mẫu này. Sự khác biệt về độ mượt của màn hình hoạt ảnh có thể không đáng chú ý lắm trên một thiết bị mạnh mẽ. máy tính desktop hoặc máy tính xách tay nhưng sẽ xuất hiện rõ ràng trên thiêt bị di động. Từ kinh nghiệm cá nhân Tôi có thể nói rằng trên các thiết bị này hình ảnh động sử dụng CPU chơi bị giật hơn so với trò chơi sử dụng GPU.

Làm thế nào để đảm bảo rằng hình ảnh động ở trong tăng tốc phần cứng bạn đã sử dụng GPU phải không? Áp dụng dịch3d! Khi bạn chuyển đổi một phần tử bằng dịch3d, phần tử đó sẽ được xử lý thông qua GPU trong các trình duyệt Webkit như Chrome và Safari ( được cài đặt trên iPhone và iPad), trong Internet Explorer 9/10, và cả trong phiên bản mới nhất Firefox. Điều này mang lại lợi thế rõ ràng cho Translate3d.

Còn JavaScript thì sao?

Đối với các hiệu ứng di chuột CSS được tạo bằng JavaScript, trong đó tất cả nội suy được xử lý bằng mã, tôi thực sự không biết liệu việc sử dụng GPU có hiệu quả như vậy hay không. Nhưng để cài đặt với sử dụng JavaScript Các hiệu ứng chuyển tiếp và hoạt ảnh CSS có thuộc tính Translate3d được GPU sử dụng.

Khi bạn sử dụng JavaScript để đặt thuộc tính hoạt ảnh hoặc chuyển tiếp, phép nội suy giữa giá trị ban đầu và điểm cuối hoạt ảnh vẫn được tạo bằng trình duyệt. Những vòng tròn màu xanh chuyển động mà bạn có thể đã thấy ở đầu bài viết này là bằng chứng cho điều này.

Xin Chúa phù hộ cho sự biến đổi!

Lý do biến đổi có hiệu suất cao hơn là vì nó không ảnh hưởng đến bất kỳ phần tử nào khác. Mọi hành động bạn thực hiện chỉ áp dụng cho một thành phần và trình duyệt không phải xây dựng lại toàn bộ cửa sổ. Nó chỉ sửa đổi phần màn hình chứa nội dung chuyển động. Điều này không phụ thuộc vào việc GPU có liên quan hay không.

Tất cả trình duyệt hiện đại, ngoại trừ IE9 - hỗ trợ chuyển tiếp CSS và hoạt ảnh CSS, cho phép bạn triển khai hoạt ảnh sử dụng CSS, mà không liên quan đến JavaScript. Hoạt ảnh áp dụng cho mọi phần tử html cũng như các phần tử giả :trước Và :sau đó

Hỗ trợ trình duyệt

I E: 10.0
Firefox: 16.0, 5.0 -moz-
Trình duyệt Chrome: 43.0, 4.0 -webkit-
Cuộc đi săn: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
Safari của iOS: 9, 7.1 -webkit-
Opera Mini: -
Trình duyệt Android: 44, 4.1 -webkit-
Chrome dành cho Android: 44

Để sử dụng hoạt ảnh trong dự án của bạn, bạn chỉ cần thực hiện hai việc:

1. Tự tạo hoạt ảnh bằng từ khóa @keyframes
2. Kết nối nó với phần tử cần tạo hoạt ảnh và chỉ định các thuộc tính cần thiết.

quy tắc @keyframes

Luật lệ @keyframes cho phép bạn tạo hoạt ảnh bằng cách sử dụng các khung chính - trạng thái của một đối tượng tại một thời điểm nhất định.

Các khung hình chính hoạt hình được tạo bằng từ khóa từ Và ĐẾN(tương đương với các giá trị 0% và 100%) hoặc sử dụng điểm phần trăm, có thể đặt bao nhiêu tùy thích. Bạn cũng có thể kết hợp các từ khóa và điểm phần trăm.

Nếu ban đầu ( từ, 0%) hoặc cuối cùng ( ĐẾN, 100%) thì trình duyệt sẽ cài đặt cho chúng giá trị tính toán các thuộc tính hoạt hình như cũ nếu hoạt ảnh không được áp dụng.

Nếu hai khung hình chính có cùng bộ chọn, khung hình tiếp theo sẽ hủy khung hình trước đó.

Khi xác định hình động ngay sau thuộc tính @keyframes phải theo sau là tên của hoạt ảnh này ( Tên sau đó phải được chỉ định trong thuộc tính hoạt ảnh của phần tử được tạo hoạt ảnh).

@keyframes di chuyển ( từ ( Transform: TranslateX(0px); ) 50% ( Transform: TranslateX(130px); ) 100% ( Transform: TranslateX(0px); ) )

Chúng tôi đã tạo một hoạt ảnh hoạt động như thế này:

1. Bắt đầu hoạt ảnh ( từ có thể được viết là 0%) — vị trí của phần tử dọc theo trục X là 0px;
2. Giữa hoạt ảnh (50%) - vị trí của phần tử dọc theo trục X là 130px;
3. Kết thúc hoạt hình ( ĐẾN chúng tôi đã sử dụng 100%) - chúng tôi trả phần tử về phần đầu của hoạt ảnh, tức là. vị trí trục X của phần tử là 0px;

Ở đây và bên dưới, để thuận tiện, tôi đã viết trong các ví dụ một số dòng JavaScript sẽ luân phiên thêm hoặc xóa một lớp có hoạt ảnh trên một phần tử, vì vậy để phát hoạt ảnh, chỉ cần nhấp vào phần tử này.

Các khung hình chính có thể được nhóm lại:

@keyframes di chuyển ( từ ( Transform: TranslateX(0px); ) 25%, 50% ( Transform: TranslateX(130px); ) 100% ( Transform: TranslateX(0px); ) )

Bạn có thể gán nhiều hình ảnh động cho một thành phần; tên và tham số của chúng phải được viết theo thứ tự gán:

phần tử ( animation-name: animation-1, animation-2; animation-duration: 2s, 4s; )

Việc kết nối hoạt ảnh với một phần tử được thực hiện bằng hai lệnh - tên hoạt hình Và Thời lượng hoạt ảnh.

Tên hoạt hình

Tài sản tên hoạt hình chỉ định tên của hình ảnh động. Bạn nên sử dụng tên phản ánh bản chất của hoạt ảnh và bạn có thể sử dụng một hoặc nhiều từ, liên kết với nhau bằng dấu cách - hoặc dấu gạch dưới _.

tên hoạt hình: di chuyển;

Chức năng thời gian

Tài sản chức năng hoạt hình-thời gian cho phép bạn thiết lập một chức năng đặc biệt chịu trách nhiệm về tốc độ phát lại hình ảnh động. Xin lưu ý rằng tốc độ phát lại hoạt ảnh thường không tuyến tính, tức là tốc độ tức thời của nó ở các khu vực khác nhau sẽ khác nhau. TRÊN khoảnh khắc này Có một số đối số đã được tích hợp sẵn cho quy tắc này: xoa dịu, dễ dàng trong, thoải mái , dễ dàng ra vào, tuyến tính , bước khởi đầu , bước cuối.

Tuy nhiên, bạn có thể tự tạo các chức năng như vậy. Chức năng đặc biệt khối bezier(P1x, P1y, P2x, P2y); lấy bốn đối số và xây dựng đường cong phân phối giá trị dựa trên chúng trong quá trình hoạt ảnh. Bạn có thể thực hành tạo các chức năng của riêng mình và xem cách chúng hoạt động trên trang web này.

Cuối cùng, hoạt ảnh có thể được biến thành một tập hợp các giá trị rời rạc bằng hàm bước(số bước, hướng), các đối số trong đó xác định số bước và hướng của nó, có thể nhận các giá trị bắt đầu hoặc kết thúc .

• xoa dịu- chức năng mặc định, hoạt ảnh bắt đầu chậm, tăng tốc nhanh và chậm lại ở cuối. Tương ứng với khối bezier (0,25,0,1,0,25,1).
• tuyến tính— hoạt ảnh diễn ra đồng đều trong toàn bộ thời gian, không có sự dao động về tốc độ; tương ứng với khối bezier(0,0,1,1).
• dễ dàng trong— hoạt ảnh bắt đầu chậm rãi và sau đó tăng tốc mượt mà ở cuối; tương ứng với khối bezier (0,42,0,1,1).
• thoải mái— hoạt ảnh bắt đầu nhanh chóng và chậm lại một cách mượt mà ở cuối; tương ứng với khối bezier(0,0,0,58,1).
• dễ dàng ra vào- hoạt ảnh bắt đầu chậm và kết thúc chậm; tương ứng với khối bezier (0,42,0,0,58,1).
• khối bezier(x1, y1, x2, y2)- xem ở trên.
• thừa kế- kế thừa thuộc tính này từ phần tử cha.

So sánh trực quan

Hoạt ảnh có độ trễ

Tài sản độ trễ hoạt hình xác định độ trễ trước khi hoạt ảnh bắt đầu phát, được đặt bằng giây hoặc mili giây. Độ trễ âm bắt đầu hoạt ảnh từ một điểm nhất định trong chu kỳ của nó, tức là. kể từ thời điểm được chỉ định trong độ trễ. Điều này cho phép bạn áp dụng hoạt ảnh cho nhiều phần tử dịch pha bằng cách chỉ thay đổi thời gian trễ. Nếu bạn muốn hoạt ảnh bắt đầu từ giữa, hãy đặt độ trễ âm bằng một nửa thời gian đã đặt trong Thời lượng hoạt ảnh. Không được thừa kế.

phần tử ( animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // 10 giây sẽ trôi qua trước khi hoạt ảnh này bắt đầu. )

Lặp lại hoạt ảnh

Tài sản hoạt hình-lặp-đếm cho phép bạn chạy hoạt ảnh nhiều lần. Không được thừa kế. Đặt giá trị thành bất kỳ giá trị dương nào 1, 2, 3 … vân vân. hoặc vô hạn cho sự lặp lại vô tận. Nghĩa 0 hoặc bất kỳ số âm nào sẽ loại bỏ hoạt ảnh đang phát.