CSS 动画

本文目录结构

CSS 动画定义和用法

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

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


浏览器支持

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

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

ChromeIEFFsafariopen
4.0 -webkit-10.016.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 / 精选教程

浏览全部教程

HTML

CSS

JS

关于本站

阿西河前端教程more,是一个提供大前端开发教程的网站;这里不仅会有传统的WEB开发教程,还会包含Nodejs,Docker,云服务相关的介绍;

lagou