主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

一些 CSS 属性可用于动画制作,这意味着它们可用于过渡等效果中。

可设置动画的 CSS 属性,可以从一个值逐渐更改为另一个值,例如尺寸、数字、百分比和颜色。


浏览器支持

表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。

-webkit--moz--o-后面的数字注明了使用前缀的第一个版本。

Chrome 浏览器 IE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
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-

背景色渐变动画

下面设置一个背景颜色从红色到蓝色的来回改变的动画:

.animate{
    width: 300px;
    height: 200px;
    background: red;
    animation: bgChange 5s infinite;
}

@keyframes bgChange {
    0% {
        background-color: #ffb96f;
    }
    33% {
        background-color: #ff8f64;
    }
    66% {
        background-color: #bf45ff;
    }
    100% {
        background-color: #ffb96f;
    }
}

实例演示效果:


动画相关属性

下面的表格中列出了 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 试一试


评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
95 章节
154 阅读
0 评论
教程目录

CSS 参考手册

CSS 属性(字母排序) CSS 属性(功能排序) CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-start-end-radius border-start-start-radius border-top-left-radius border-top-right-radius border-top-style