సిఎస్ఎస్ అనిమేషన్ రిలేటెడ్ అట్రిబ్యూట్స్

定义和用法

一些 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 ప్రయత్నించండి
తక్కువవైపు ప్రయత్నించండి
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 ప్రయత్నించండి
ఎడమవైపు ప్రయత్నించండి
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 ప్రయత్నించండి
కుడివైపు ప్రయత్నించండి
text-decoration-color ప్రయత్నించండి
text-indent ప్రయత్నించండి
text-shadow ప్రయత్నించండి
పైకి ప్రయత్నించండి
transform ప్రయత్నించండి
transform-origin ప్రయత్నించండి
vertical-align ప్రయత్నించండి
visibility
width ప్రయత్నించండి
word-spacing ప్రయత్నించండి
z-index ప్రయత్నించండి