Tất cả các ví dụ trên trang này bây giờ sẽ hoạt động tại Firefox, Safari, Chrome, Opera và Internet Explorer 10+. Trong các trình duyệt cũ hơn, bạn sẽ thấy không có hiệu ứng, hoặc các biến đổi diễn ra mà không có bất kỳ hoạt hình nào. Các tiền tố cụ thể của trình duyệt không còn cần thiết. Show
Các hình ảnh động được trình bày dưới đây liên quan đến việc thiết lập một chuyển đổi để diễn ra để đáp ứng với một con chuột 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 chức năng thời gian chuyển tiếp khiến việc 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 hình khác có sẵn, 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ệtMộ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ố cần thiết là -webkit-, -moz-, -o- và -ms-. Internet Explorer 10 và cao hơn hỗ trợ chuyển đổi mà không có tiền tố. Trong IE10 Xem trước, tiền tố -ms- được yêu cầu cho các lần chuyển đổi. Biến đổi trong tất cả các phiên bản của IE10 vẫn yêu cầu tiền tố. Để hỗ trợ các trình duyệt cũ này, các kiểu sau đây nên được sử dụng để chuyển tiếp:
và cho các biến đổi:
Vì tất cả các trình duyệt hiện đại hiện đang hỗ trợ các 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 các 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 các phép biến đổi CSSHiệu quả của biến đổi CSS là sửa đổi sự xuất hiệ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 một bảng kiểu, các phép biến đổi được áp dụng là trang được hiển thị, vì vậy bạn không thực sự thấy bất kỳ hình ảnh động nào diễn ra. Biến đổi cũng có thể được áp dụng dưới dạng hiệu ứng: Hover mà bạn có thể thấy trong phần tiếp theo. Đề xuất của Apple về các phép biến đổi CSS kêu gọi khả năng thay đổi quan điểm và làm việc theo ba chiều, nhưng đó là một cách nào đó. Ngay cả các tính năng được thể hiện ở đây sẽ không xuất hiện trong các trình duyệt khác cho đến khi chúng được chấp thuận bởi cơ quan tiêu chuẩn, những người vẫn đang ngụy biện cho 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 như một hộp 100 x 60 pixel với đường viền 2 pixel. Sau đó, mỗi phần tử đã được chuyển đổi theo một cách nào đó bằng cách sử dụng thuộc tính Transform:
Mã HTML và CSS cho ví dụ này như sau: <style>
.boxes {
display: flex;
flex-flow: row nowrap;
}
.boxes > div {
flex: 1;
margin: 4em 1em;
border: 2px solid green;
background-color: #fff;
line-height: 60px;
text-align: center;
}
</style>
<div class="boxes">
<div style="transform: translate(3em, 0);">box 1</div>
<div style="transform: rotate(30deg); border-color: red;">box 2</div>
<div style="transform: translate(-3em, 1em);">box 3</div>
<div style="transform: scale(2);">box 4</div>
</div>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 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:  Đáng chú ý là thực tế là văn bản vẫn có thể lựa chọn trong các phần tử được chuyển đổi, ngay cả khi được xoay và tỷ lệ một phần tử ảnh hưởng đến các thuộc tính bao gồm chiều rộng biên và kích thước phông chữ và không chỉ kích thước hộp. Hoạt hình biến đổi của bạnMặc dù tự biến đổi CSS là một công cụ mạnh mẽ 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 làm động các hiệu ứng tương tự khi sử dụng quá trình chuyển đổi thú vị hơn nhiều. Di chuyển chuột qua bốn hộp sau để trình diễn: Những gì bạn thấy ở trên là bốn hộp từ phần trước trong trạng thái mặc định của chúng. Tuy nhiên, khi bạn MouseOver bất kỳ hộp nào, phép biến đổi CSS được áp dụng dưới dạng hoạt hình một giây. Khi con chuột di chuyển đi hoạt hình đảo ngược, đưa mỗi hộp trở về trạng thái ban đầu. Và chúng ta có thể làm điều này mà không cần sử dụng JavaScript - chỉ HTML và CSS! Dưới đây là mã hoàn chỉnh cho 'Hộp 1' trượt sang phải và lưng: <style>
.boxes > div {
margin: 4em 1em;
border: 2px solid green;
background-color: #fff;
line-height: 60px;
text-align: center;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.boxes > div.slideright:hover {
-webkit-transform: translate(3em, 0);
-moz-transform: translate(3em, 0);
-o-transform: translate(3em, 0);
-ms-transform: translate(3em, 0);
transform: translate(3em, 0);
}
</style>
<div class="boxes">
<div class="slideright">box 1</div>
</div>Nếu bạn nghĩ rằng điều đó thật tuyệt, hãy nhận ra rằng hoạt hình CSS có thể được áp dụng không chỉ cho các biến đổi, mà còn cho các thuộc tính CSS khác bao gồm: độ mờ, màu sắc và một loạt những người khác. Trong ví dụ tiếp theo, hộp bên trái bắt đầu là nhỏ và màu xanh lá cây với các góc vuông, trong khi cái bên phải lớn hơn, với đường viền màu đỏ và các góc tròn. Việc lơ lửng trên một trong hai hộp sẽ kích hoạt một hình ảnh động khiến hộp 1 xuất hiện của 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 biến đổi, hai hộp vẫn sẽ thay đổi màu biên giới của chúng, và có thể cũng là Border-Radius, nhưng nó xảy ra ngay lập tức thay vì là một hoạt hình thứ hai. Để biết các ví dụ nâng cao hơn, bạn có thể đọc bài viết mới của chúng tôi về việc sử dụng JavaScript để kích hoạt hoạt hì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 hoạt hình và thời gian, bạn có thể sử dụng Window.RequestAnimationFrame. Nhiều biến đổi trên một phần tửĐể áp dụng nhiều hơn một chuyển đổi cho một phần tử duy nhất chỉ cần liệt kê chúng một lần khác được phân tách bởi các không gian. Ví dụ, menu con ở trên cùng bên phải của trang này có các kiểu sau: <style>
#submenu {
background-color: #eee;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#submenu:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
}
</style>Điều này có nghĩa là khi bạn di chuột qua menu con, nó sẽ thay đổi màu sắc, xoay và gấp đôi kích thước trong khoảng thời gian một giây như được hiển thị ở đây: Những hiệu ứng này hiện có sẵn 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. Cho dù đó là một ý tưởng tốt để thêm chúng vào trang web của bạn, tôi sẽ để lại cho bạn. Hoạt hình trong hành độngBây giờ đây là một ví dụ khác về loại niềm vui mà chúng ta có thể có trong việc kết hợp các hiệu ứng khác nhau thành hoạt hình đơn lẻ. Có lẽ bạn đã có thể tìm ra những gì sẽ xảy ra dựa trên CSS? <style>
/* initial state */
#outerspace {
position: relative;
height: 400px;
background: #0c0440 url(/images/outerspace.jpg);
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
transition: 3s ease-in;
}
div.rocket > div {
width: 92px;
height: 215px;
background: url(/images/rocket.gif) no-repeat;
transition: 2s ease-in-out;
}
/* hover final state */
#outerspace:hover > div.rocket {
transform: translate(540px,-200px);
}
#outerspace:hover > div.rocket > div {
transform: rotate(70deg);
}
</style>Và HTML: <div id="outerspace">
<div class="rocket">
<div><!-- rocket --></div>
.rocket
</div>#outerspace
</div>Đặt chúng lại với nhau và đây là những gì bạn nhận được: Nếu bạn đang sử dụng Safari 3, bạn có thể nhận thấy một số vấn đề với hoạt hình, đặc biệt là khi nó đảo ngược sau khi bạn di chuyển chuột đi, nhưng trong phiên bản mới nhất của WebKit, nó đã mượt mà hơn nhiều. Ngoài ra, hoạt hình trong Opera là một chút thất thường, không phải tất cả các yếu tố được hoạt hình. Đường viền chấm chấm xuất hiện trong hoạt hình cho thấy 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, điều gì đang xảy ra là khi bạn di chuyển chuột qua nền không gian, tên lửa dịch từ phía dưới sang bên trái sang bên phải trong khoảng thời gian 3 giây (dịch ()) và cũng xoay 70 độ theo chiều kim đồng hồ Trong 2 giây đầu tiên (xoay ()). Hiệu quả là thô sơ, nhưng cho thấy sức mạnh. Để có nhiều quyền kiểm soát hơn đối với các đường dẫn hoạt hình và thời gian, bạn có thể thiết lập các khung hình khóa WebKit. Chúng cũng cho phép các hình ảnh động chạy tự động và liên tục thay vì chỉ để đáp ứng các sự kiện của chuột. Nhiều chức năng thời gianTrong ví dụ này, chúng tôi đang áp dụng bốn chuyển đổi khác nhau bằ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ừ màu đỏ sang màu xanh và di chuyển từ trên cùng bên trái của hộp chứa sang dưới cùng bên phải trong hai giây. Điều đầu tiên bạn sẽ nhận thấy là chuyển động của hộp dường như bị cong hơn là thẳng. Đó là bởi vì chúng tôi đã sử dụng chức năng thời gian dễ dàng cho bản dịch ngang và dễ dàng cho chiều dọc. Để kích thích trên một đường cong 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 để kiểm soát hoạt hình. Trong thời gian hoạt hình, sự thay đổi màu sắc từ màu xanh sang màu đỏ diễn ra trong giây đầu tiên của hai lần chuyển đổi thứ hai, sau đó là vòng quay diễn ra trong giây thứ hai. Bí quyết cho điều này là thay vì xác định quá trình chuyển đổi là 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 tiếp 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: <style>
#block {
...
left: 0;
top: 0;
...
background: blue;
...
transition-property: left, top, background, transform;
transition-timing-function: ease-out, ease-in, linear, ease-in-out;
transition-delay: 0, 0, 0, 1s;
transition-duration: 2s, 2s, 1s, 1s;
...
}
#stage:hover #block {
left: 100px;
top: 100px;
background: red;
transform: rotate(360deg);
...
}
</style>Các quy tắc ảnh hưởng đến quá trình chuyển đổi màu nền đã được nhấn mạnh. Chúng diễn ra trong giây thứ nhất (độ trễ 0S, thời lượng 1S). 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 không trong độ trễ chuyển tiếp, do đó 0s, 0s, 0s, 1s 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 yếu tố để ảnh hưởng đến một yếu tố khácMột vài người đã hỏi về việc kích hoạt hình ảnh động liên quan đến một sự kiện nhấp chuột 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 hình và để có một phép chuyển đổi hoặc các khung khóa 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 như> (trẻ em), + (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 thùng chứa của nó, trong ví dụ này, hộp màu xanh chỉ được hoạt hình khi bạn di chuột qua việc chụp, hộp màu đỏ: Hộp màu đỏ: Mã CSS có liên quan như sau. Lưu ý rằng chúng tôi đang sử dụng Combinator anh chị em liền kề để nhắm mục tiêu #Box2 khi #Box1 trải nghiệm 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 (một số ví dụ). <style>
#box2 {
position: absolute;
left: 120px;
...
background: blue;
...
transition: 1s ease-in-out;
}
#box1:hover + #box2 {
transform: rotate(360deg);
left: calc(100% - 102px);
background: yellow;
}
</style>Internet Explorer 11 không cố gắng làm động khi các giá trị đã được gán bằng cách sử dụng calc (). Bạn sẽ cần sử dụng một giá trị cố định thay vào đó nếu bạn muốn hỗ trợ MSIE 11. Cũng không thể làm động từ trái: 0 sang phải: 0. Tất nhiên chúng ta vẫn có thể làm động 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 chắc chắn không di chuyển phần tử lơ lửng ra từ dưới con trỏ hoặc hình ảnh động sẽ dừng/đảo ngược. Các ví dụ này hoạt động ít nhiều như dự định trong WebKit (Safari, Chrome), Firefox và Opera Trình duyệt. Họ cũng làm việc trong Internet Explorer 10. Kiểm soát hoạt hình ngượcTrong tất cả các ví dụ trên, bạn có thể nhận thấy một số hiệu ứng kỳ lạ khi hình ảnh động 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 hình hoàn thành. Hộp trong hoạt hình dưới đây sẽ tăng chậm và sau đó bắn ra đúng khi sử dụng chức năng thời gian cực kỳ hình khối, khiến nó bắt đầu nhanh chóng và sau đó chậm lại ở cuối. CSS cho ví dụ trên như sau: <style>
#stage {
position: relative;
height: 4em;
background: #efefef;
text-align: center;
}
#stage > #box {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
background: red;
line-height: 2em;
color: #fff;
transition: 1s 0s bottom, 1s 1s left cubic-bezier(0,1,1,1);
}
#stage:hover > #box {
left: calc(100% - 100px);
bottom: 2em;
}
</style>Lưu ý rằng khi bạn di chuyển chuột đi, hộp sẽ không theo dõi cùng một đường dẫn. Thay vào đó, hình ảnh động dọc sẽ đến lần đầu tiên theo sau là dấu gạch ngang ngang. Đối với một giải pháp cho điều này, hãy tiếp tục đọc dưới đây. Như đã ám chỉ ở trên, có thể kiểm soát hoạt hình theo cả hai hướng. Trong trường hợp này khiến hoạt hì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: Hover và để 'không hover' sử dụng quá trình chuyển đổi đảo ngược chúng: ________số 8Điều này có thể hữu ích cho các hiệu ứng nút và menu để tạo một phần tử trên trang xuất hiện nhanh chóng và sau đó mờ dần từ từ hoặc ngược lại. Hãy nhớ rằng các chuyển đổi được đặt trong: Tuyên bố Hover là những chuyển đổi sẽ được sử dụng làm 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. Người giới thiệu
Bản dịch
< CSS Gần đây nhất là 20 trong số 41 bình luận: Đăng bình luận hoặc câu hỏi của bạnTôi có thể sử dụng Transform in Animation không?Hoạt hình thú vị có thể được tạo bằng CSS3 bằng cách sử dụng các biến đổi và chuyển tiếp. Các biến đổi được sử dụng để tạo ra một yếu tố thay đổi từ trạng thái này sang trạng thái khác. Các ví dụ sẽ là xoay, di chuyển, sai lệch và tỷ lệ các yếu tố.. Transforms are used to make an element change from one state to another. Examples would be rotating, moving, skewing, and scaling elements.
Những thuộc tính CSS nào không thể hoạt hình?Bạn không thể làm động chiều cao của một yếu tố từ chiều cao tự động, tự động được tính toán (ví dụ: một phần tử chứa đầy văn bản), mặc dù có thể làm động cho chiều cao tối thiểu của nó.the height of an element from an auto-computed, natural height (e.g. an element filled with text), although is is possible to animate its min-height.
Bạn có thể làm động bằng cách sử dụng CSS không?Hoạt hình CSS giúp có thể làm động các chuyển tiếp từ cấu hình kiểu CSS này sang cấu hình kiểu CSS khác.Hoạt hình bao gồm hai thành phần, một kiểu mô tả hình ảnh động CSS và một bộ các khung chính biểu thị trạng thái bắt đầu và kết thúc của phong cách hoạt hình, cũng như các điểm trung gian có thể.. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
Hoạt hình khác với CSS biến đổi như thế nào?Chuyển đổi CSS thường là tốt nhất cho các chuyển động từ đơn giản, trong khi hoạt hình CSS là cho các loạt chuyển động phức tạp hơn.Thật dễ dàng để nhầm lẫn các chuyển đổi và hoạt hình CSS vì họ cho phép bạn làm những việc tương tự.Đây chỉ là một vài ví dụ: bạn có thể trực quan hóa các thay đổi thuộc tính.CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples: You can visualize property changes. |
