Thuộc tính liên quan đến hiệu ứng động CSS

Định nghĩa và cách sử dụng

Một số thuộc tính CSS có thể được sử dụng để tạo hiệu ứng hoạt hình, điều này có nghĩa là chúng có thể được sử dụng trong hiệu ứng chuyển đổi khác.

Các thuộc tính có thể thiết lập hiệu ứng hoạt hình có thể thay đổi từ giá trị này sang giá trị khác, ví dụ như kích thước, số, phần trăm và màu sắc.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản đầu tiên của trình duyệt hỗ trợ hoàn toàn hiệu ứng hoạt hình CSS.

Số ở sau -webkit-、-moz- hoặc -o- chỉ ra phiên bản đầu tiên của tiền tố được sử dụng.

43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Mẫu

Đặt hiệu ứng chuyển đổi màu nền từ đỏ sang xanh:

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
{}

Thử ngay

Thuộc tính liên quan đến hiệu ứng hoạt hình

Dưới đây là bảng liệt kê các thuộc tính liên quan đến hiệu ứng hoạt hình trong CSS:

属性 TIY
background Thử thử
background-color Thử thử
background-position Thử thử
background-size Thử thử
border Thử thử
border-bottom Thử thử
border-bottom-color Thử thử
border-bottom-left-radius Thử thử
border-bottom-right-radius Thử thử
border-bottom-width Thử thử
border-color Thử thử
border-left Thử thử
border-left-color Thử thử
border-left-width Thử thử
border-right Thử thử
border-right-color Thử thử
border-right-width Thử thử
border-spacing Thử thử
border-top Thử thử
border-top-color Thử thử
border-top-left-radius Thử thử
border-top-right-radius Thử thử
border-top-width Thử thử
bottom Thử thử
box-shadow Thử thử
clip Thử thử
color Thử thử
column-count Thử thử
column-gap Thử thử
column-rule Thử thử
column-rule-color Thử thử
column-rule-width Thử thử
column-width Thử thử
columns Thử thử
filter Thử thử
flex Thử thử
flex-basis Thử thử
flex-grow Thử thử
flex-shrink Thử thử
font Thử thử
font-size Thử thử
font-size-adjust
font-stretch
font-weight Thử thử
grid Thử thử
grid-area Thử thử
grid-auto-columns Thử thử
grid-auto-flow Thử thử
grid-auto-rows Thử thử
grid-column Thử thử
grid-column-end Thử thử
grid-column-gap Thử thử
grid-column-start Thử thử
grid-gap Thử thử
grid-row Thử thử
grid-row-end Thử thử
grid-row-gap Thử thử
grid-row-start Thử thử
grid-template Thử thử
grid-template-areas Thử thử
grid-template-columns Thử thử
grid-template-rows Thử thử
height Thử thử
left Thử thử
letter-spacing Thử thử
line-height Thử thử
margin Thử thử
margin-bottom Thử thử
margin-left Thử thử
margin-right Thử thử
margin-top Thử thử
max-height Thử thử
max-width Thử thử
min-height Thử thử
min-width Thử thử
object-position Thử thử
opacity Thử thử
order Thử thử
outline Thử thử
outline-color Thử thử
outline-offset Thử thử
outline-width Thử thử
padding Thử thử
padding-bottom Thử thử
padding-left Thử thử
padding-right Thử thử
padding-top Thử thử
perspective Thử thử
perspective-origin Thử thử
right Thử thử
text-decoration-color Thử thử
text-indent Thử thử
text-shadow Thử thử
top Thử thử
transform Thử thử
transform-origin Thử thử
vertical-align Thử thử
visibility
width Thử thử
word-spacing Thử thử
z-index Thử thử