Các thành phần của một hình ảnh động css3 là gì?

Tất cả các ví dụ trên trang này giờ đây sẽ hoạt động trong Firefox, Safari, Chrome, Opera và Internet Explorer 10+. Trong các trình duyệt cũ hơn, bạn sẽ không thấy hiệu ứng nào hoặc quá trình biến đổi diễn ra mà không có bất kỳ hoạt ảnh nào. Tiền tố dành riêng cho trình duyệt không còn cần thiết

Các hoạt ảnh được trình bày bên dưới liên quan đến việc thiết lập một chuyển đổi diễn ra để phản hồi lại di chuột qua hoặc sự kiện khác. Sau đó, thay vì áp dụng hiệu ứng ngay lập tức, chúng tôi chỉ định một chức năng thời gian chuyển đổi khiến quá trình chuyển đổi diễn ra tăng dần trong một khoảng thời gian đã đặt

Ngoài ra còn có các loại hoạt ảnh khác, bao gồm @keyframes cho chuyển động vĩnh viễn và requestAnimationFrame cho phép kiểm soát hoàn toàn thời gian và đường dẫn. Chúng được đề cập trong các bài viết riêng biệt

hỗ trợ trình duyệt

Một số trình duyệt đã giới thiệu hỗ trợ cho các biến đổi trước khi thông số kỹ thuật được hoàn thiện, sử dụng một loạt các tiền tố dành riêng cho trình duyệt. Đối với Safari, Firefox, Opera và Internet Explorer, các tiền tố bắt buộc là -webkit-, -moz-, -o- và -ms-

Internet Explorer 10 trở lên hỗ trợ chuyển đổi không có tiền tố. Trong Bản xem trước IE10, cần có tiền tố -ms- để chuyển đổi. Chuyển đổi trong tất cả các phiên bản IE10 vẫn yêu cầu tiền tố

Để hỗ trợ các trình duyệt cũ này, nên sử dụng các kiểu sau để chuyển tiếp

• -webkit-chuyển tiếp
• -moz-chuyển đổi
• -o-chuyển tiếp
• chuyển tiếp

và cho biến đổi

• -webkit-biến đổi
• -moz-biến đổi
• -o-biến đổi
• -ms-biến đổi
• biến đổi

Vì tất cả các trình duyệt hiện đại hiện hỗ trợ biến đổi và chuyển đổi bằng cách sử dụng cú pháp không có tiền tố chính thức, chúng tôi đã xóa tiền tố khỏi hầu hết các mã mẫu bên dưới, nhưng vẫn sử dụng chúng trong nền

Giới thiệu chuyển đổi CSS

Tác dụng của CSS Transform là sửa đổi giao diện của một phần tử trong trình duyệt bằng cách dịch, xoay hoặc các phương tiện khác. Khi được xác định trong biểu định kiểu, các phép biến đổi được áp dụng khi trang được hiển thị, vì vậy bạn thực sự không thấy bất kỳ hoạt ảnh nào đang diễn ra. Biến đổi cũng có thể được áp dụng như một. hiệu ứng di chuột mà bạn có thể thấy trong phần tiếp theo

Đề xuất của Apple về Chuyển đổi CSS yêu cầu khả năng thay đổi phối cảnh và hoạt động theo ba chiều, nhưng điều đó vẫn còn xa. Ngay cả các tính năng được trình bày ở đây cũng sẽ không xuất hiện trong các trình duyệt khác cho đến khi chúng được cơ quan tiêu chuẩn chấp thuận, những người vẫn đang ngụy biện về các mô-đun CSS3

Dưới đây, chúng tôi đã đặt bốn DIV giống hệt nhau được tạo kiểu dưới dạng hộp 100 x 60 pixel với đường viền 2 pixel. Sau đó, mỗi phần tử đã được biến đổi theo một cách nào đó bằng cách sử dụng thuộc tính biến đổi

ô 1Dịch sang phải. biến đổi. translate(3em,0);box 2Xoay 30 độ theo chiều kim đồng hồ. biến đổi. rotate(30deg);box 3Dịch sang trái và xuống dưới. biến đổi. translate(-3em, 1em);box 4Được phóng to gấp đôi kích thước ban đầu. biến đổi. tỷ lệ (2);

Mã HTML và CSS cho ví dụ này như sau

box 1

box 2

box 3

box 4

Nếu không có bản dịch và đường viền màu đỏ trên hộp thứ hai, bạn sẽ chỉ thấy bốn hộp giống hệt nhau được dán nhãn từ một đến bốn. Tuy nhiên, những gì bạn thấy trong các trình duyệt được hỗ trợ (Safari, Chrome, Firefox, Opera) sẽ giống như thế này hơn

Đáng chú ý là văn bản vẫn có thể được chọn trong các phần tử được chuyển đổi, ngay cả khi được xoay và việc chia tỷ lệ phần tử ảnh hưởng đến các thuộc tính bao gồm độ rộng đường viền và kích thước phông chữ chứ không chỉ kích thước hộp

Tạo hiệu ứng chuyển đổi của bạn

Mặc dù bản thân CSS Transformation là một công cụ mạnh mẽ dành cho các nhà phát triển (mặc dù tôi rùng mình khi nghĩ điều gì sẽ xảy ra khi nó được sử dụng rộng rãi hơn), khả năng tạo hoạt ảnh cho các hiệu ứng tương tự bằng cách sử dụng quá trình chuyển đổi thú vị hơn nhiều. Di chuột qua bốn ô sau đây để minh họa

Những gì bạn thấy ở trên là bốn hộp từ phần trước ở trạng thái mặc định của chúng. Tuy nhiên, khi bạn di chuột qua bất kỳ hộp nào, chuyển đổi CSS được áp dụng dưới dạng hoạt ảnh một giây. Khi chuột di chuyển, hoạt ảnh đảo ngược, đưa từng hộp trở lại trạng thái ban đầu

Và chúng tôi có thể làm điều này mà không cần sử dụng JavaScript - chỉ HTML và CSS. Đây là mã hoàn chỉnh cho 'hộp 1' trượt sang phải và quay lại

box 1

Nếu bạn nghĩ điều đó thật tuyệt, hãy nhận ra rằng Hoạt hình CSS không chỉ được áp dụng cho các phép biến đổi mà còn cho các thuộc tính CSS khác bao gồm. độ mờ đục, màu sắc và một loạt những thứ khác

Trong ví dụ tiếp theo, hộp bên trái bắt đầu nhỏ và có màu xanh lục với các góc vuông, trong khi hộp bên phải lớn hơn, có viền đỏ và các góc tròn. Di chuột qua một trong hai hộp sẽ kích hoạt hoạt ảnh làm cho hộp 1 trông giống hộp 2 và ngược lại

Một lần nữa, chúng tôi vẫn chỉ sử dụng HTML và CSS để thực hiện điều này. Nếu không có CSS ​​Transforms, hai hộp sẽ vẫn thay đổi màu đường viền và có thể cả bán kính đường viền, nhưng nó xảy ra ngay lập tức chứ không phải dưới dạng hoạt ảnh một giây

Để biết thêm các ví dụ nâng cao, bạn có thể đọc bài viết mới của chúng tôi về cách sử dụng JavaScript để kích hoạt hoạt ảnh. Và để thay thế cho các chuyển đổi CSS và kiểm soát tốt hơn các đường dẫn và thời gian của hoạt ảnh, bạn có thể sử dụng Window. yêu cầuAnimationFrame

Nhiều phép biến đổi trên một phần tử

Để áp dụng nhiều phép biến đổi cho một phần tử, chỉ cần liệt kê chúng lần lượt từng phần tử được phân tách bằng dấu cách. Ví dụ, menu con ở trên cùng bên phải của trang này có các kiểu sau

Điều này có nghĩa là khi bạn di chuột qua menu phụ, nó sẽ đổi màu, xoay và tăng gấp đôi kích thước trong khoảng thời gian một giây như minh họa ở đây

<=>

Các hiệu ứng này hiện đã có trong bản phát hành công khai mới nhất của Safari, vì vậy về nguyên tắc, tất cả người dùng OSX sẽ có thể thấy các hiệu ứng này. Việc thêm chúng vào trang web của bạn có phải là một ý kiến ​​hay hay không, tôi sẽ tùy thuộc vào bạn.

Hoạt hình trong hành động

Bây giờ đây là một ví dụ khác về sự thú vị mà chúng ta có thể có khi kết hợp các hiệu ứng khác nhau vào một hoạt ảnh duy nhất. Có lẽ bạn đã có thể tìm ra điều gì sẽ xảy ra dựa trên CSS?

và HTML

.rocket

#outerspace

Đặt chúng lại với nhau và đây là những gì bạn nhận được

Nếu đang sử dụng Safari 3, bạn có thể nhận thấy một số vấn đề với hoạt ảnh, đặc biệt là khi hoạt ảnh đảo ngược sau khi bạn di chuột ra xa, nhưng trong phiên bản WebKit mới nhất, hoạt ảnh đã mượt mà hơn nhiều. Ngoài ra, hoạt ảnh trong Opera hơi thất thường, không phải tất cả các yếu tố đều hoạt ảnh

Đường viền chấm xuất hiện trong hoạt ảnh hiển thị vị trí của DIV chứa hình ảnh tên lửa. DIV này dịch trên màn hình trong khi hình ảnh bên trong được xoay. Giản dị

Đối với trình duyệt yếu, điều đang xảy ra là khi bạn di chuyển chuột trên nền không gian, tên lửa sẽ dịch từ dưới cùng bên trái lên trên cùng bên phải trong khoảng thời gian 3 giây (dịch()) và cũng quay 70 độ theo chiều kim đồng hồ . Hiệu quả là thô sơ, nhưng cho thấy tiềm năng

Để có nhiều quyền kiểm soát hơn đối với đường dẫn và thời gian của hoạt ảnh, bạn có thể thiết lập Khung hình chính WebKit. Chúng cũng cho phép hoạt ảnh chạy tự động và liên tục thay vì chỉ phản ứng với các sự kiện của chuột

Nhiều chức năng hẹn giờ

Trong ví dụ này, chúng tôi đang áp dụng bốn chuyển đổi khác nhau bằng cách sử dụng bốn chức năng thời gian khác nhau

Khi bạn. di chuột qua khu vực bên phải hộp màu xanh sẽ quay, đổi màu từ đỏ sang xanh và di chuyển từ trên cùng bên trái của hộp chứa xuống dưới cùng bên phải trong hơn hai giây

Điều đầu tiên bạn sẽ nhận thấy là chuyển động của hộp có vẻ cong hơn là thẳng. Đó là bởi vì chúng tôi đã sử dụng chức năng định thời gian nới lỏng cho dịch ngang và dễ dàng vào theo chiều dọc

Để tạo hoạt ảnh trên một đường cong thực tế hoặc thậm chí là một đường dẫn tùy ý, bạn sẽ cần sử dụng JavaScript để điều khiển hoạt ảnh

Trong quá trình hoạt hình, sự thay đổi màu sắc từ xanh sang đỏ diễn ra trong giây đầu tiên của quá trình chuyển đổi hai giây, tiếp theo là chuyển động quay diễn ra trong giây thứ hai

Mẹo để làm điều này là thay vì xác định quá trình chuyển đổi dưới dạng một thuộc tính duy nhất, bạn có thể chia nó thành các phần thành phần. Chúng tôi cũng đã sử dụng độ trễ chuyển đổi cho phép bạn đặt điểm bắt đầu của các hiệu ứng khác nhau

Dưới đây là các câu lệnh CSS có liên quan

Các quy tắc ảnh hưởng đến quá trình chuyển đổi màu nền đã được tô sáng. Chúng diễn ra trong giây đầu tiên (độ trễ 0 giây, thời lượng 1 giây). Biến đổi xoay diễn ra trong giây tiếp theo (độ trễ 1s, thời lượng 1s)

Không giống như các trình duyệt khác, Firefox yêu cầu các đơn vị được chỉ định ngay cả đối với các giá trị bằng 0 trong độ trễ chuyển tiếp, do đó, 0, 0, 0, 1 sẽ hoạt động cho ví dụ trên. Để thực hành tốt nhất, bạn nên bao gồm giây cho tất cả các giá trị thời gian CSS

Di chuột qua một phần tử để tác động đến phần tử khác

Một số người đã hỏi về việc kích hoạt hoạt ảnh liên quan đến sự kiện nhấp hoặc di chuột ở nơi khác trên trang. Với JavaScript, điều này có thể được thực hiện bằng cách sử dụng trình xử lý sự kiện để đặt hoặc thay đổi tên lớp của phần tử thành hoạt ảnh và để chuyển đổi hoặc khung hình chính được liên kết với lớp mới

Sử dụng CSS, có một số tùy chọn để nhắm mục tiêu các yếu tố liên quan. Chúng liên quan đến các bộ chọn, chẳng hạn như các tổ hợp > (con), + (anh chị em liền kề) và ~ (anh chị em chung)

Tất cả các ví dụ trước đều yêu cầu một sự kiện di chuột trực tiếp trên chính phần tử đó hoặc trên vùng chứa của nó, trong ví dụ này, hộp màu xanh chỉ hoạt hình khi bạn di chuột qua phần tử bên cạnh, hộp màu đỏ

Mã CSS có liên quan như sau. Lưu ý rằng chúng tôi đang sử dụng bộ kết hợp + anh chị em liền kề để nhắm mục tiêu #box2 khi #box1 trải qua sự kiện di chuột. Bộ kết hợp ~ có thể linh hoạt hơn trong việc cho phép bạn nhắm mục tiêu các phần tử cách xa phần tử kích hoạt hơn (một số ví dụ)

Internet Explorer 11 không cố gắng hoạt hình khi các giá trị đã được gán bằng cách sử dụng calc(). Thay vào đó, bạn sẽ cần sử dụng một giá trị cố định nếu muốn hỗ trợ MSIE 11. Cũng không thể tạo hoạt ảnh từ bên trái. 0 sang phải. 0

Tất nhiên chúng ta vẫn có thể tạo hiệu ứng động cho hộp đầu tiên cùng lúc với việc nhắm mục tiêu anh chị em hoặc anh chị em của nó

Chỉ cần đảm bảo không di chuyển phần tử được di chuột ra khỏi bên dưới con trỏ, nếu không hoạt ảnh sẽ dừng/đảo ngược

Các ví dụ này ít nhiều hoạt động như dự định trong các trình duyệt WebKit (Safari, Chrome), Firefox và Opera. Chúng cũng hoạt động trong Internet Explorer 10

Kiểm soát hoạt hình đảo ngược

Trong tất cả các ví dụ trên, bạn có thể nhận thấy một số hiệu ứng lạ khi hoạt ảnh bị đảo ngược - đặc biệt là khi chuột di chuyển ra khỏi khu vực kích hoạt trước khi hoạt ảnh hoàn thành

Hộp trong hình ảnh động bên dưới sẽ tăng dần lên và sau đó lao sang bên phải bằng cách sử dụng chức năng định thời cực đại khối bezier, làm cho hộp bắt đầu nhanh và sau đó chậm lại ở cuối

CSS cho ví dụ trên như sau

Lưu ý rằng khi bạn di chuột ra xa, hộp sẽ không theo dõi lại trên cùng một đường dẫn. Thay vào đó, hoạt hình dọc sẽ xuất hiện trước, sau đó là dấu gạch ngang. Để có giải pháp cho vấn đề này, hãy tiếp tục đọc phần bên dưới

Như đã đề cập ở trên, có thể điều khiển hoạt ảnh theo cả hai hướng. Trong trường hợp này, hoạt ảnh thực hiện mọi thứ ngược lại

Bí quyết là chuyển sang cài đặt chuyển tiếp ban đầu sang. câu lệnh di chuột và để 'không di chuột' sử dụng chuyển đổi đảo ngược chúng

Điều này có thể hữu ích cho các hiệu ứng menu và nút để làm cho một thành phần trên trang xuất hiện nhanh chóng rồi mờ dần hoặc ngược lại

Hãy nhớ rằng các hiệu ứng chuyển tiếp được thiết lập trong. câu lệnh di chuột là những câu lệnh sẽ được sử dụng khi trạng thái di chuột được áp dụng. Cài đặt chuyển đổi 'mặc định' sẽ được sử dụng khi trở về trạng thái mặc định

Có bao nhiêu loại hoạt hình trong CSS?

Các thuộc tính hoạt hình trong CSS là gì?

Tên hoạt hình trong CSS là gì?

Bước trong hoạt hình trong CSS là gì?