CSS支持动画动画主要包括以下几类：
- Transition：Transition属性用于指定元素的一个或多个属性在一定时间内平滑地过渡。主要包含以下子属性：
transition-property: 指定应用过渡效果的 CSS 属性名称列表。transition-duration: 指定过渡效果的持续时间。transition-timing-function: 指定过渡效果的速度曲线。transition-delay: 指定过渡效果的延迟时间。1
- Animation：Animation属性是animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。主要包含以下子属性：
animation-name: 指定要应用的 @keyframes 动画。animation-duration: 指定动画的持续时间。animation-timing-function: 指定动画的速度曲线。animation-delay: 指定动画的延迟时间。animation-iteration-count: 指定动画的播放次数。animation-direction: 指定动画的播放方向。animation-fill-mode: 指定动画的填充模式。animation-play-state: 指定动画的播放状态。3
- Transform：Transform属性用于修改元素的形状、大小和位置。主要包含以下子属性：
translate: 移动元素。scale: 缩放元素。rotate: 旋转元素。skew: 倾斜元素。transform-origin: 指定元素变形的原点。1
以上这些属性都可以在CSS中用来制作动画，但需要注意的是，并非所有的CSS属性都支持这些动画效果，具体的支持情况可以参考MDN文档。
支持动画的元素属性
在CSS中，只有一部分属性可以被动画化。以下是一些常见的可以被动画化的CSS属性：
- Position：此属性影响定位元素的水平位置。此属性对非定位元素无效。例如，当position为absolute或fixed时，left属性会将元素的左边缘设置为其最近定位祖先的左边缘左侧的单位。2
- Opacity：此属性用于控制元素的透明度。1
- Transform：此属性用于修改元素的形状、大小和位置。例如，scale用于调整元素的大小，rotate用于旋转元素，translate用于移动元素等。1
- Background-color：此属性用于设置元素的背景色。3
- Height：此属性用于设置元素的高度。3
请注意，并非所有的CSS属性都可以被动画化。例如，background-image属性不能被动画化。
根据MDN文档，以下是可以用于动画的CSS属性：
- background
- background-attachment
- background-color
- background-image
- background-position
- background-repeat
- border
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- height
- hyphens
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- 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-style
- outline-width
- overflow
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- position
- quotes
- right
- table-layout
- text-align
- text-decoration
- text-indent
- text-overflow
- text-shadow
- text-transform
- top
- transform
- transform-origin
- vertical-align
- visibility
- white-space
- width
- word-spacing
- z-index
以上列表中的每个属性都可以用于创建CSS动画。然而，并非所有的CSS属性都可以被动画化，你可以参考MDN文档中的"动画性CSS属性"部分，了解更多信息。1, 3
