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

推荐手册

animation

animation
animation是用于为页面创建动画效果的,需要和@keyframes一起使用,才可以创建动画。
编辑:前端控 前端控 更新时间:2019-01-26 17:31:29

animation属性

含义:

为页面创建动画效果

浏览器支持:

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

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性                                     
浏览器        IE     Chrome      Firefox       Safari      Opera
animation

       10.0

43.0/4.0 -webkit-16.0 /5.0 -moz-9.0/4.0 -webkit-     30.0
15.0 -webkit-
12.0 -o-

CSS语法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性值

说明
animation-name指定要绑定到选择器的关键帧的名称
animation-duration动画指定需要多少秒或毫秒完成
animation-timing-function设置动画将如何完成一个周期
animation-delay设置动画在启动前的延迟间隔。
animation-iteration-count定义动画的播放次数。
animation-direction指定是否应该轮流反向播放动画。
animation-fill-mode规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state指定动画是否正在运行或已暂停。
initial设置属性为其默认值,请参考initial
inherit从父元素继承属性,请参考 iinherit

实例

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:demp 5s infinite;
	-webkit-animation:demo 5s infinite; 
}
@keyframes demo
{
	from {left:0px;}
	to {left:450px;}
}
@-webkit-keyframes demo 
{
	from {left:0px;}
	to {left:450px;}
}
</style>
</head>
<body>
<div></div>

运行实例 »

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

效果图:

GIF.gif

注意:Internet Explorer 9 及更早IE版本不支持 animation 属性。

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号