×
CSS 参考手册CSS 选择器CSS 听觉参考手册CSS Web安全字体组合CSS 动画CSS 单位CSS 颜色CSS 合法颜色值CSS 颜色名称CSS 颜色十六进制值CSS 浏览器支持

CSS 属性

align-contentalign-itemsalign-selfallanimation(动画)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearancebackface-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-alignbox-directionbox-flexbox-flex-groupbox-linesbox-ordinal-groupbox-orientbox-packbox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilter(滤镜)flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgrid-columnsgrid-rowshanging-punctuationheighticonjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionpunctuation-trimquotesresizerightrotationtab-sizetable-layouttargettarget-nametarget-newtarget-positiontext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-outlinetext-overflowtext-shadowtext-transformtext-wraptoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-indexwriting-mode

CSS 动画


定义和用法

一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

4.0 -webkit- 10.0 16.0
5.0 -moz-
4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-

实例

背景颜色逐渐地从红色变化到蓝色:

@keyframes mymove { from {background-color:red;} to {background-color:blue;} } /*Safari 和 Chrome:*/ @-webkit-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尝试一下 》
height尝试一下 》
left尝试一下 》
letter-spacing尝试一下 》
line-height尝试一下 》
margin尝试一下 》
margin-bottom尝试一下 》
margin-left尝试一下 》
margin-right尝试一下 》
margin-top尝试一下 》
max-height尝试一下 》
max-width尝试一下 》
min-height尝试一下 》
min-width尝试一下 》
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尝试一下 》

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)