购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 动画

CSS 动画
动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。
编辑:前端控 前端控 更新时间:2019-01-17 13:32:32

CSS 动画


定义和用法

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

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


浏览器支持

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

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

1.gif1546322467179911.gif3.gif4.gif5.gif
4.0 -webkit-10.016.0
5.0 -moz-
4.0 -webkit-15.0 -webkit-
12.1
12.0 -o-

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

实例

@keyframes mymove
    {
    from {background-color:red;}
    to {background-color:blue;}
}
 
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
    from {background-color:red;}
    to {background-color:blue;}
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

1.gif


动画属性

CSS 中的动画属性:

属性描述继承性CSS版本
animation复合属性。检索或设置对象所应用的动画特效无 CSS3
animation-name检索或设置对象所应用的动画名称无 CSS3
animation-duration检索或设置对象动画的持续时间无 CSS3
animation-timing-function检索或设置对象动画的过渡类型无 CSS3
animation-delay检索或设置对象动画延迟的时间无 CSS3
animation-iteration-count检索或设置对象动画的循环次数无 CSS3
animation-direction检索或设置对象动画在循环中是否反向运动无 CSS3
animation-play-state检索或设置对象动画的状态无 CSS3
animation-fill-mode检索或设置对象动画时间之外的状态无 CSS3
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号