轻松上手,快乐学习!

CSS 参考手册

CSS 参考手册CSS 浏览器支持CSS 选择器参考手册CSS 函数参考手册CSS 听觉参考手册CSS 网络安全字体CSS 动画相关属性CSS 单位Px/Em 换算CSS 颜色CSS 合法颜色值CSS 默认值参考手册CSS 实体

CSS 属性

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index


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 中的动画相关属性:

属性
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测试一下