Nền hoạt hình css
|
CSS cho phép chúng ta tạo hoạt ảnh cho các phần tử HTML mà không cần phải sử dụng JavaScript hoặc Flash Show Trong bài đọc này, chúng ta sẽ tìm hiểu về các thuộc tính sau
Hỗ trợ trình duyệtCác số trong bảng bên dưới chỉ định phiên bản đầu tiên của trình duyệt được hỗ trợ đầy đủ cho các thuộc tính Thuộc tính@keyframes43. 010. 016. 09. 030. 0animation-name43. 010. 016. 09. 030. 0animation-duration43. 010. 016. 09. 030. 0animation-delay43. 010. 016. 09. 030. 0animation-iteration-count43. 010. 016. 09. 030. 0animation-direction43. 010. 016. 09. 030. 0animation-timing-function43. 010. 016. 09. 030. 0animation-fill-mode43. 010. 016. 09. 030. 0animation43. 010. 016. 09. 030. 0 CSS Animations là gì?Thuộc tính CSS /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
4 cho phép một phần tử tăng dần thay đổi từ kiểu này sang kiểu khác. Chúng ta có thể thay đổi bao nhiêu thuộc tính CSS và thay đổi bao nhiêu lần tùy chọnĐể sử dụng CSS hoạt ảnh, trước tiên chúng ta phải chỉ định một số khung hình chính cho hoạt ảnh. Các khung hình chính sẽ giữ nguyên kiểu dáng mà phần tử sẽ có ở một số thời điểm nhất định Quy tắt @keyframesKhi chúng ta chỉ định dạng CSS bên trong quy định tắt /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
6, hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới tại một số thời điểm nhất địnhĐể kích hoạt ảnh hoạt động, chúng ta phải liên kết hoạt ảnh với một phần tử HTML Ví dụ sau liên kết hoạt động ảnh "ví dụ" với phần tử Hoạt động của ảnh sẽ kéo dài trong 4 giây và nó sẽ tăng dần thay đổi màu nền của phần tử từ "đỏ" thành "vàng" Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
1View results /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
8 xác định khoảng thời gian bao lâu một hình ảnh động cần thực hiện để hoàn thành. Nếu thuộc tính /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
8 không được xác định duy nhất, sẽ không có bất kỳ hoạt động ảnh nào xảy ra, vì giá trị mặc định là 0 giây (0 giây)Trong ví dụ trên, chúng tôi chỉ xác định khi nào kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)) Nó cũng có thể sử dụng phần trăm giá trị. Bằng cách sử dụng phần trăm giá trị, chúng tôi có thể thêm bao nhiêu thay đổi tùy chọn loại Ví dụ sau sẽ thay đổi màu nền của phần tử khi kích hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi kích hoạt ảnh hoàn thành 100% Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
View results Ví dụ sau sẽ thay đổi cả màu nền và vị trí của phần tử khi kích hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi kích hoạt ảnh hoàn thành 100% Ví dụ /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
View results Thuộc tính CSS animation-delayThuộc tính /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
9 quy định cụ thể thời gian trễ trước khi bắt đầu của một hình ảnh độngVí dụ sau khi hoạt động chờ đợi 2 giây trước khi bắt đầu chạy ứng dụng Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
7View results Giá trị âm thanh cũng được cho phép. Nếu sử dụng các giá trị âm thanh, hoạt ảnh sẽ bắt đầu như thể nó đã được phát trong N giây Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã chạy được 2 giây Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
8View results Quy định số lần kích hoạt ảnh sẽ chạyThuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
0 quy định số lần hoạt động ảnh sẽ chạyVí dụ sau khi hoạt ảnh sẽ chạy 3 lần trước khi nó dừng lại Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
0View results Ví dụ sau sử dụng giá trị "infinite" để kích hoạt ảnh chạy mãi mãi Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
1View results Thuộc tính CSS animation-directionThuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
1 quy định cụ thể một phần tử chạy hiệu ứng ảnh sẽ chạy về phía trước, hoặc chạy ngược lại hoặc chạy một chu kỳ thay thế khácThuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
1 có các giá trị sau
Ví dụ sau sẽ khởi động ảnh theo hướng ngược lại (reverse) Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
8View results Ví dụ sau sử dụng value "alternate" để cho hoạt ảnh chạy về phía trước, sau đó chạy ngược lại Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
9View results Ví dụ sau sử dụng giá trị "alternate-reverse" để cho hoạt ảnh chạy ngược trước, sau đó chuyển tiếp Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
0View results Chỉ định tốc độ biến tốc độ của Hoạt động hình ảnhThuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
2 quy định các tốc độ tùy biến của hoạt ảnhThuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
2 có các giá trị sau
Ví dụ sau đây cho thấy một số tùy chọn tốc độ khác nhau có thể được sử dụng Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
0View results Thuộc tính CSS animation-fill-modeHoạt động CSS không ảnh hưởng đến một phần tử trước khi khung hình chính đầu tiên được phát hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
3 có thể ghi đè hành vi nàyThuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
3 quy định cụ thể một kiểu cho các mục tiêu tử khi các hoạt động ảnh bị dừng chạy (trước khi nó bắt đầu, sau khi nó kết thúc hoặc cả hai)Thuộc tính /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
3 có các giá trị sau
Ví dụ sau cho phép phần tử giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi kết thúc hoạt ảnh Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
1View results Ví dụ sau cho phép phần tử nhận các kiểu giá trị được đặt bởi các khung hình chính đầu tiên trước khi hoạt động ảnh bắt đầu (trong khoảng thời gian hoạt động của ảnh) Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
2View results Ví dụ sau cho phép phần tử nhận các kiểu giá trị được đặt bởi các khung hình chính đầu tiên trước khi hoạt động ảnh bắt đầu và giữ lại các kiểu giá trị từ các khung hình chính cuối cùng khi hoạt động ảnh kết thúc Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
3View results Thuộc tính CSS animation viết tắtVí dụ dưới đây sử dụng sáu thuộc tính hoạt động Ví dụ /* Code animation */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: green;}
100% {background-color: blue;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
}
4Hiệu ứng hoạt ảnh tương tự như trên có thể được tắt bằng cách sử dụng thuộc tính duy nhất /* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Phần tử áp dụng hiệu ứng animation */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
4 |
