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-

实例

设置背景颜色从红色到蓝色的动画:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  width: 300px;
  height: 200px;
  background: red;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
}
</style>
</head>
<body>
<h1>Animation of background-color</h1>

<p>逐渐将背景颜色从红色更改为蓝色:<p>

<div id="myDIV"></div>

<p><b>注释:</b>CSS 动画在 Internet Explorer 9 以及更早版本中不起作用。</p>

</body>
</html>

动画相关属性

下面的表格中列出了 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
相关推荐
cellurw1 分钟前
20260724 六组件编译收尾与全局构建验证
前端
用户29307509766913 分钟前
用React 完成Todos 的 组件应用:深入理解单向数据流与组件通信
前端
玉宇夕落26 分钟前
React 父子组件通信 Todo List 看透单向数据流与不可变数据
前端
软件开发技术深度爱好者26 分钟前
国际音标魔法实验室工具HTML5实现
前端·html5·英语学习
FogLetter27 分钟前
嘘!WebSocket正在“偷听”你的网络请求——全双工通信的魔法
前端·面试
用户9385156350728 分钟前
从零构建 React Todo 应用:组件化设计与数据流深度解析
前端·javascript
IT_陈寒31 分钟前
Python线程池把我坑惨了,这些盲区你不踩?
前端·人工智能·后端
程序员爱钓鱼1 小时前
第一个 Go 程序:Hello World
前端·后端·go
阳光是sunny1 小时前
LangGraph 核心概念详解:从编译到可视化
前端·人工智能·后端
不好听6132 小时前
React 父子组件通信:从 Todo 应用理解单向数据流
前端·react.js