CSS 动画相关属性


定义和用法

一些 CSS 属性可用于动画制作,这意味着它们可用于过渡等效果中。

可设置动画的属性可以从一个值逐渐更改为另一个值,例如尺寸、数字、百分比和颜色。


浏览器支持

表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。

-webkit-、-moz- 或 -o- 后面的数字注明了使用前缀的第一个版本。

43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-

实例

设置背景颜色从红色到蓝色的动画:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6. width: 300px;
  7. height: 200px;
  8. background: red;
  9. animation: mymove 5s infinite;
  10. }
  11. @keyframes mymove {
  12. from {background-color: red;}
  13. to {background-color: blue;}
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <h2>背景颜色动画</h2>
  19. <p>逐渐将背景颜色从红色更改为蓝色:<p>
  20. <div id="myDIV"></div>
  21. <p><b>注释:</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>
  22. </body>
  23. </html>

动画相关属性

下面的表格中列出了 CSS 中的动画相关属性:

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