文档章节

keyframes在不同浏览器中的表现性

lonelydawn
 lonelydawn
发布于 2016/06/24 16:18
字数 1128
阅读 37
收藏 0

一、keyframes的使用方法

keyframes是css3实现动画的一种方式。

简单的使用规则如下:

先定义元素的动画样式,并设置动画的名称

selector{
    animation: name duration timing-function delay iteration-count direction;
}

之后用keyframes实现动画

@keyframes name{
    0%{ /*state...*/}
    100%{/*state...*/}
}

animation的可用属性如下:

描述
animation-name 规定需要绑定到选择器的 keyframe 名称,必须
animation-duration 规定完成动画所花费的时间,以秒或毫秒计,必须
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

 二、keyframes在不同浏览器中的表现性

IE 9以下不支持

IE10支持文字和样式动画,但不支持图片帧动画

Firefox支持文字和样式动画,不支持图片帧动画

Chrome支持各种形式的动画

下面我写了一段代码来测试keyframes在不同浏览器中的表现性

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Animation</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div id="img"></div>

	<div id="common">
		<div class="orbit"></div>
		<div class="obj"></div>
	</div>
</body>
</html>
#img{
	width:211px;
	height:211px;
	position: fixed;
	top:0px;
	left:0px;
	border:1px #eee dashed;
	background-image: url("../img/10000.png");
	-webkit-animation:fly 3s infinite linear;
	-moz-animation:fly 3s infinite linear;
	-ms-animation:fly 3s infinite linear;
}

@-webkit-keyframes fly{		
	0%{
		background-image: url("../img/10000.png");
	}
	3%{
		background-image: url("../img/10001.png");
	}
	6%{
		background-image: url("../img/10002.png");
	}
	9%{
		background-image: url("../img/10003.png");
	}
	12%{
		background-image: url("../img/10004.png");
	}
	15%{
		background-image: url("../img/10005.png");
	}
	18%{
		background-image: url("../img/10006.png");
	}
	21%{
		background-image: url("../img/10007.png");
	}
	28%{
		background-image: url("../img/10008.png");
	}
	35%{
		background-image: url("../img/10009.png");
	}
	42%{
		background-image: url("../img/10010.png");
	}
	48%{
		background-image: url("../img/10011.png");
	}
	51%{
		background-image: url("../img/10012.png");
	}
	54%{
		background-image: url("../img/10013.png");
	}
	57%{
		background-image: url("../img/10014.png");
	}
	60%{
		background-image: url("../img/10015.png");
	}
	63%{
		background-image: url("../img/10016.png");
	}
	66%{
		background-image: url("../img/10017.png");
	}
	69%{
		background-image: url("../img/10018.png");
	}
	72%{
		background-image: url("../img/10019.png");
	}
	75%{
		background-image: url("../img/10020.png");
	}
	78%{
		background-image: url("../img/10021.png");
	}
	82%{
		background-image: url("../img/10022.png");
	}
	86%{
		background-image: url("../img/10023.png");
	}
	90%{
		background-image: url("../img/10024.png");
	}
	94%{
		background-image: url("../img/10025.png");
	}
	97%{
		background-image: url("../img/10026.png");
	}
	100%{
		background-image: url("../img/10027.png");
	}
}

@-moz-keyframes fly{		
	0%{
		background-image: url("../img/10000.png");
	}
	3%{
		background-image: url("../img/10001.png");
	}
	6%{
		background-image: url("../img/10002.png");
	}
	9%{
		background-image: url("../img/10003.png");
	}
	12%{
		background-image: url("../img/10004.png");
	}
	15%{
		background-image: url("../img/10005.png");
	}
	18%{
		background-image: url("../img/10006.png");
	}
	21%{
		background-image: url("../img/10007.png");
	}
	28%{
		background-image: url("../img/10008.png");
	}
	35%{
		background-image: url("../img/10009.png");
	}
	42%{
		background-image: url("../img/10010.png");
	}
	48%{
		background-image: url("../img/10011.png");
	}
	51%{
		background-image: url("../img/10012.png");
	}
	54%{
		background-image: url("../img/10013.png");
	}
	57%{
		background-image: url("../img/10014.png");
	}
	60%{
		background-image: url("../img/10015.png");
	}
	63%{
		background-image: url("../img/10016.png");
	}
	66%{
		background-image: url("../img/10017.png");
	}
	69%{
		background-image: url("../img/10018.png");
	}
	72%{
		background-image: url("../img/10019.png");
	}
	75%{
		background-image: url("../img/10020.png");
	}
	78%{
		background-image: url("../img/10021.png");
	}
	82%{
		background-image: url("../img/10022.png");
	}
	86%{
		background-image: url("../img/10023.png");
	}
	90%{
		background-image: url("../img/10024.png");
	}
	94%{
		background-image: url("../img/10025.png");
	}
	97%{
		background-image: url("../img/10026.png");
	}
	100%{
		background-image: url("../img/10027.png");
	}
}

@-ms-keyframes fly{		
	0%{
		background-image: url("../img/10000.png");
	}
	3%{
		background-image: url("../img/10001.png");
	}
	6%{
		background-image: url("../img/10002.png");
	}
	9%{
		background-image: url("../img/10003.png");
	}
	12%{
		background-image: url("../img/10004.png");
	}
	15%{
		background-image: url("../img/10005.png");
	}
	18%{
		background-image: url("../img/10006.png");
	}
	21%{
		background-image: url("../img/10007.png");
	}
	28%{
		background-image: url("../img/10008.png");
	}
	35%{
		background-image: url("../img/10009.png");
	}
	42%{
		background-image: url("../img/10010.png");
	}
	48%{
		background-image: url("../img/10011.png");
	}
	51%{
		background-image: url("../img/10012.png");
	}
	54%{
		background-image: url("../img/10013.png");
	}
	57%{
		background-image: url("../img/10014.png");
	}
	60%{
		background-image: url("../img/10015.png");
	}
	63%{
		background-image: url("../img/10016.png");
	}
	66%{
		background-image: url("../img/10017.png");
	}
	69%{
		background-image: url("../img/10018.png");
	}
	72%{
		background-image: url("../img/10019.png");
	}
	75%{
		background-image: url("../img/10020.png");
	}
	78%{
		background-image: url("../img/10021.png");
	}
	82%{
		background-image: url("../img/10022.png");
	}
	86%{
		background-image: url("../img/10023.png");
	}
	90%{
		background-image: url("../img/10024.png");
	}
	94%{
		background-image: url("../img/10025.png");
	}
	97%{
		background-image: url("../img/10026.png");
	}
	100%{
		background-image: url("../img/10027.png");
	}
}

#common{
	width:600px;
	height:600px;
	position:relative;
	margin:0 auto;
	background-color: #000;
	padding: 0;
	transform:scale(1);
}

.orbit{
	margin:0px;
	padding: 0px;
	height:100px;
	width:100px;
	position: absolute;
	left:250px;
	top:250px;
	background-color: transparent;
	border-radius: 50%;
	border:1px dashed #999;
}

.obj{
	width:10px;
	height:10px;
	position: absolute;
	left:245px;
	top:295px;
	background-color: rgb(166,138,56);
	border-radius: 50%;
	transform-origin:55px 5px;
	-webkit-animation:hellotest 15s linear;
	-moz-animation:hellotest 15s linear;
	-ms-animation:hellotest 15s linear;
}

@-webkit-keyframes hellotest{
	10%{
		transform:rotate(100deg);
		width:200px;
	}
	20%{
		transform:rotate(-100deg);
		height:200px;
	}
	40%{
		transform:rotate(100deg);
		height:10px;
	}
	60%{
		transform:rotate(-100deg);
		width:10px;
	}
	80%{
		transform:rotate(100deg);
		background-color: rgba(256,256,256,1);
	}
	100%{
		transform:rotate(-360deg);
		background-color: rgba(256,256,256,0);
	}
}

@-moz-keyframes hellotest{
	10%{
		transform:rotate(100deg);
		width:200px;
	}
	20%{
		transform:rotate(-100deg);
		height:200px;
	}
	40%{
		transform:rotate(100deg);
		height:10px;
	}
	60%{
		transform:rotate(-100deg);
		width:10px;
	}
	80%{
		transform:rotate(100deg);
		background-color: rgba(256,256,256,1);
	}
	100%{
		transform:rotate(-360deg);
		background-color: rgba(256,256,256,0);
	}
}

@-ms-keyframes hellotest{
	10%{
		transform:rotate(100deg);
		width:200px;
	}
	20%{
		transform:rotate(-100deg);
		height:200px;
	}
	40%{
		transform:rotate(100deg);
		height:10px;
	}
	60%{
		transform:rotate(-100deg);
		width:10px;
	}
	80%{
		transform:rotate(100deg);
		background-color: rgba(256,256,256,1);
	}
	100%{
		transform:rotate(-360deg);
		background-color: rgba(256,256,256,0);
	}
}

在IE9中,仙鹤和小球均无动画效果

在IE10中,仙鹤无动画效果,小球运动

在Firefox中,仙鹤无动画效果,小球运动

在Chrome中,仙鹤和小球均有运动效果,keyframes只在chrome中表现良好

在线演示

© 著作权归作者所有

共有 人打赏支持
lonelydawn
粉丝 41
博文 50
码字总数 52905
作品 0
闵行
前端工程师
私信 提问
CSS3 动画:水平翻转

首先,我们在网页里面放置 3 个图标。 css3 相应的 html 代码为: 然后,我们做一个特效:当鼠标滑过图标时,让这几个图标水平翻转。 CSS3水平翻转 如需在 CSS3 中创建动画,需要使用 @keyfr...

qkkyhovd
2015/08/24
1K
0
CSS3 @keyframes animate

1.@keyframes定义和用法 通过 @keyframes 规则,您能够创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中,您能够多次改变这套 CSS 样式。 以百分比来规定改...

leona_lily
2015/08/06
0
0
CSS3实现动画效果教程详解

在传统网页上动画一般都是通过Javascript或flash来实现,但是Html5的时代的到来,CSS的进化,让动画实现起来更加easy,今天E良师益友网就来介绍一下如何通过CSS3来实现简单的动画效果: 一、C...

罗马教堂的钟声
2016/01/08
264
0
开发一个移动端相册

兼容性问题 android和ios的引擎都是webkit的内核 手势操作代替鼠标事件:mousedown,mouseup,click 设备分辨率不同:pad,phone ,所以需要"响应式布局"来适应不同的分辨率的机器 CSS3代替 DOM ai...

boogoogle
2016/02/26
75
0
HTML CSS笔记变形效果-过渡效果-动画效果

一.transform CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform 和 transform-origin。 对于 transform 的属性值,具体如下表: //向...

菜鸟不菜么
2018/05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

从 JVM 分析 hibernate-validator NoClassDefFoundError

最近排查一个spring boot应用抛出hibernate.validator NoClassDefFoundError的问题,异常信息如下: Caused by: java.lang.NoClassDefFoundError: Could not initialize class org.hibernat......

微笑向暖wx
20分钟前
1
0
c++指针和字符串

==============================

天王盖地虎626
25分钟前
2
0
从 JVM 分析 hibernate-validator NoClassDefFoundError

最近排查一个spring boot应用抛出hibernate.validator NoClassDefFoundError的问题,异常信息如下: Caused by: java.lang.NoClassDefFoundError: Could not initialize class org.hibernat......

java菜分享
30分钟前
2
0
超500款社交APP对标微信,细分未来社交领域

“微信之父”张小龙在2019微信公开课PRO活动上透露,截止2018年8月,微信的日登录量已超过10亿。腾讯2018年三季度财报显示,QQ智能终端月活跃账户达6.98亿人。 当前微信和QQ无疑是中国最大且...

ThinkSNS账号
37分钟前
1
0
Fiddler 抓包工具总结

序章 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。反正好处多多,举之不尽呀!当年学习的时候也蛮费劲,一...

javaer
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部