CSS ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇ

定义和用法

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

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

浏览器支持

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

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

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-

实例

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

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

亲自试一试

动画相关属性

下面的表格中列出了 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 کوشش کریں
وارٹیکل-این-الائن کوشش کریں
ویزibility
وائیڈت کوشش کریں
ورد-این-اسپیسنگ کوشش کریں
زی-این-اینڈکس کوشش کریں