当CSS属性值被设置为在指定的时间段内更改时，元素在页面上是动态的。因此，CSS动画属性是可以从一个值逐渐改变到另一个值的属性，比如大小、数字、颜色或百分比。
CSS动画就像过渡，只是有更好的控制和更广泛的选择。
我们已经编译了一个A-Z的CSS Animatable属性列表以及每个的演示。让我们看看各种各样的你可以用CSS创建动画在你的网站上。
CSS Animatable属性列表
以下是您可以使用CSS设置动画的所有属性的列表，他们做了什么，以及每个属性。
笔记：在浏览器的隐身窗口中打开动画演示。
背景
这是用于设置页面背景的属性的简写。它允许你显示多达8个属性:背景图像那背景位置那background-size那背景重复那background-origin那background-clip那background-attachment,背景颜色．
其中一些属性是可动画的，我们在这个CSS可动画属性列表中单独分享了更多细节。
背景颜色
此属性帮助您设置元素的背景颜色，即元素所占的空间，包括填充和边框，但不包括边距。
可以以不同方式指定颜色值：
- 十六进制格式#rrggbb.
- RGB的格式为RGB(红、绿、蓝)
- RGBA格式RGBA（红色，绿色，蓝色，阿尔法）
- HSL格式为HSL(色相、饱和度、亮度)
- HSLA格式为色相，饱和度，亮度，alpha
- 预定义。CSS和HTML规范包括您可以使用的140个预定义的颜色名称。
- 这currentcolor关键字可用于表示颜色属性的值。在使用时，没有属性值的元素可以默认继承颜色。
背景位置
这用于设置背景图像的起始位置。值包括左上角，左中心，左下底，右上角，右侧中心，右下角，中心顶部，中心中心和中心底部。
background-size
这用于设置背景图像的大小。值包括自动，长度，百分比，封面和包含。
边境
这有助于您对元素的边界进行风格。这是一个速记财产：边框宽度那边框样式,边框颜色．当未指定边框时，将应用文本颜色。
边境
这是用来设置底部边框的样式。这是一个速记财产：border-bottom-width那border-bottom-style,边框底色．
边框底色
设置元素下边框的颜色。请注意，在应用颜色之前，您需要有一个边框。因此，总是定义边框样式或border-bottom-style之前边框底色．
border-bottom-left-radius
这将为元素的角落添加圆角边框。它允许您定义左下角的半径。值包括长度和百分比。
border-bottom-right-radius
这定义了右下角的半径。
border-bottom-width
设置底部边框的宽度。它应该在边界创建之后定义边框样式或border-bottom-style属性。值包括介质，薄，厚和长度。
边框颜色
这设置了边框颜色。它可以定义多达四个值格式Border-color: color1 color2 color3 color4;
如果它有四个值，则边框的每侧都会获得指定的颜色。
如果它有三个值，顶部和底部边框将获得第一个和最后一个指定的颜色，而右侧和左侧边框将使用中间颜色样式。
如果它有两个值，顶部和底部的颜色取第一个颜色，而左右边框取第二个颜色。
如果它只有一个值，则所有边框都具有指定的颜色。
边框左边
设置左边框样式。这是一个速记财产：border-left-width那border-left-style,border-left-color．
border-left-color
这设置了左侧边框的颜色。值包括颜色和透明度。
border-left-width
这设置了左侧边框的宽度。值包括介质，薄，厚和长度。
边境
这是右边边界的样式。这是一个速记财产：边界右侧宽度那border-right-style,边框 - 右颜色．
边框 - 右颜色
这将设置正确颜色的边框。
边界右侧宽度
设置右边框的宽度。
border-spacing
这定义了表格中单元格边界之间的距离。
边缘
这样式化了上边框。这是一个速记财产：border-top-width那border-top-style,边界 - 顶颜色．
边界 - 顶颜色
设置顶部边框的颜色。
border-top-left-radius
这定义了左上角的半径。
边缘 - 右半径
这定义了右上角半径。
border-top-width
这设置了上边框的宽度。
底
这用于垂直定位元素。它只影响定位的元素。
当职位为:
- 位置:绝对的;或位置:固定;元件的底部边缘被设置为上方或下方最近的位于祖先的底部边缘的单元。
- 位置:相对;底边在其正常位置上方或下方移动。
- 位置:粘性;这底属性的行为类似于当元素分别位于视区内部和外部时，它处于相对或固定的位置。
- 位置:静态;该物业没有效果。
不必
这将阴影添加到元素。值包括无，水平偏移，垂直偏移，模糊，传播和颜色。
剪辑
这使您可以剪切大于包含元素的图像。值包括自动和形状。
颜色
这定义了文本的颜色。
列计数
这将元素划分为列。值包括number和auto。
纵队间隔
这设置了列之间的间距。值包括长度和正常值。
列规则
这定义了列之间规则的宽度、样式和颜色。这是一个速记财产：column-rule-width那column-rule-style,column-rule-color．
column-rule-color
这将设置列之间规则的颜色。
column-rule-width
这设置了列之间规则的宽度。值包括介质，薄，厚和长度。
列宽
这设置了列的宽度。值包括自动和长度。
列
这将设置列的宽度和计数。这是一个速记财产：列宽和列计数．
过滤器
这将设置一个元素的视觉效果，如模糊和饱和度。值包括模糊、亮度、对比度和灰度。
flex
这使得灵活的物品上的灵活长度设置。这是一个速记财产：flex-grow那flex-shrink,弯曲基础．
弯曲基础
这定义了一个灵活项目的初始长度。值包括:number和auto。
flex-grow
这指定了一个项目相对于容器中的其他灵活项目将增长多少。
flex-shrink
此参数指定与容器中的其他灵活项相比，一个项将收缩多少。
字体
这样式文本字体。这是一个速记财产：字体样式那字体参数那粗细那字体大小/行高,字体系列．
字体大小
这将设置字体的大小。取值包括medium、xx-small、x-small、small、large、x-large、xx-large、smaller、bigger、length和percentage。
字体大小调整
这让您可以在第一个选择的字体不可用的情况下控制浏览器显示的字体大小。
font-stretch
这可以让文本变得更窄或更宽。值包括普通值、扩展值和压缩值。
粗细
设置字体的细度或粗细。值包括普通、粗体、粗体、浅色和数字。
网格
这将设置网格布局的样式。这是一个速记财产：grid-template-rows那grid-template-columns那网格模板区域那grid-auto-rows那grid-auto-columns,网格自动流动．
网格
它定义了网格布局中项目的大小和位置。这是一个速记财产：网格排启动那网格列开始那grid-row-end,网格柱末端．
grid-auto-columns
这将设置网格容器中列的大小。它影响没有指定大小的列。值包括长度、百分比、自动和适合内容。
网格自动流动
这决定了如何将自动放置的项目添加到网格中。值包括行，列，密集，行密集和列密度。
grid-auto-rows
这集合了行的大小。值包括自动，最大内容，最小内容和长度。
grid-column
这定义了网格项目的大小和位置。这是一个速记财产：网格列开始和网格柱末端．
网格柱末端
这定义了网格项将跨度的列数。值包括自动，跨度和列线。
grid-column-gap
这设置了列之间的间距的大小。
网格列开始
它指定网格项将在其上启动的列行。
网格间隙
它指定行和列之间的间距大小。这是一个速记财产：网格排差距和grid-column-gap．
网格排
这设置了网格项目的大小和位置。这是一个速记财产：网格排启动和grid-row-end．
grid-row-end
这定义了网格项将跨越的行数。
网格排差距
这设置了行之间的间距。
网格排启动
这将决定网格项将从哪一行开始。
网格模板
这将设置网格模板。这是一个速记财产：grid-template-rows那grid-template-columns,网格模板区域．
网格模板区域
指定网格布局内的区域。
grid-template-columns
这定义了布局中列的数量和大小。
grid-template-rows
这定义了布局中的行的数量和大小。
高度
这定义了元素的高度。这个高度不包括边缘，边界和填充物。值包括自动，长度和百分比。
剩下
设置已定位元素的左边缘。它影响元素的水平位置。
字母间距
这设置了文本中字符之间的距离。
行高
这设置了一行的高度。
保证金
这将设置元素的边距。这是一个速记财产：margin-top那margin-right那margin-bottom,边缘左边．余量可以由四个，三个，两个或一个值指定。
margin-bottom
这将设置元素的底部边距。
边缘左边
这将设置元素的左距。
margin-right
这将设置元素的右边距。
margin-top
这设置了元素的上边距。
max-height
这定义了元素的最大高度。
最大宽度
这定义了元素的最大宽度。
最小高度
这定义了元素的最小高度。
最小宽度
这定义了元素的最小宽度。
对象位置
它与object-fit结合使用x/y坐标来定义或
不透明度
这为元素设置了不透明度的程度。
命令
这定义了一个灵活项相对于容器中其他灵活项的顺序。
大纲
这将设置元素周围的轮廓。这是一个速记财产：outline-width那outline-style,边框色．
边框色
这定义了轮廓的颜色。
outline-offset
这在概要和元素边框之间添加了一个空格。
outline-width
这设置了轮廓的宽度。
填充
这将增加元素的填充。这是内容和边界之间的空间。这是一个速记财产：padding-top那填充 - 右侧那padding-bottom,填充填充．它可以有一到四个值。
padding-bottom
这定义了元素的底部填充。
填充填充
这定义了元素的左填充。
填充 - 右侧
这定义了元素的右填充。
padding-top
这定义了元素的顶部填充。
的角度来看
这将透视到3d定位的元素。
perspective-origin
这定义了观察者相对于3D对象的位置。
对
这定义了定位元素的右边缘。它影响水平位置，对非定位元素没有影响。
text-decoration-color
它指定了上划线、下划线和连线的颜色。
文本
这将在文本块中设置第一行的缩进。
文字阴影
这为文本添加了阴影。值包括水平阴影、垂直阴影、模糊半径和颜色。
最佳
这定义了定位元件的顶部边缘。它影响垂直位置，对非定位元件没有影响。
变换
这将对元素应用2D或3D效果。您可以将元素与其他功能一起移动、旋转、缩放或倾斜。
转变原点
这使您可以更改已转换元素的位置。
vertical-align
这定义了元素上的垂直对齐。
能见度
这决定了元素的可见性。
宽度
设置元素的宽度。这并不包括边距、边框或填充。
单词间距
这定义了单词之间的空白。
z - index
设置元素的堆栈顺序。较大的堆栈顺序元素出现在较低的堆栈顺序元素之前。
CSS动画属性(A - Z)
这就对了!CSS中所有可动画属性的列表。这将有助于使您的网站和演示更加生动和互动性。
最初发布于3月25日，2020年1:14:27，更新7月13日2020年
话题：
CSS动画相关文章
