CSS 动画

🌙
手机阅读
本文目录结构

CSS 动画定义和用法

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

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


浏览器支持

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

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

Chrome IE FF safari open
4.0 -webkit- 10.0 16.0
5.0 -moz-
4.0 -webkit- 15.0 -webkit-

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

@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 等待添加效果
draft: true
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 等待添加效果

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>