文档章节

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

lonelydawn
 lonelydawn
发布于 2016/06/24 16:18
字数 1128
阅读 34
收藏 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 代码为: 然后,我们做一个特效:当鼠标滑过图标时,让这几个图标水平翻转。

qkkyhovd
2015/08/24
855
0
CSS3实现动画效果教程详解

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

罗马教堂的钟声
2016/01/08
264
0
CSS3 @keyframes animate

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

leona_lily
2015/08/06
0
0
30种CSS3炫酷页面预加载loading动画特效

简要教程   这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画。当你点击页面...

柠檬酷
2015/09/10
195
0
HTML CSS笔记变形效果-过渡效果-动画效果

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

菜鸟不菜么
05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

技术工坊|如何开发一款以太坊钱包(深圳)

【好消息!】HiBlock区块链技术工坊已经成功举办了26期,其中北京1期,西安1期,成都2期,上海22期。经常有社区的小伙伴问定期举办技术工坊的除了上海以外,其他城市有没有?现在区块链技术工...

HiBlock
2分钟前
0
0
Redis 梳理笔记

安装 安装gccyum install gcc-c++下载传输到服务器上解压tar -xzvf *.tar.gzcd redis-3.2.9编译make安装 make PREFIX=/usr/local/redis install将配置文件拷贝出来cp redis...

晨猫
4分钟前
0
0
PyCharm flask 调试模式关闭 Debug mode: off 的解决方法

flask的几种debug模式的方法 # 1.app.run 传参debug=trueapp.run(debug=True) #2 设置app的配置app = Flask(__name__)app.config['DEBUG'] = True #3 配置文件方式# config.py中添加d...

yimingkeji
11分钟前
0
0
聊聊storm TridentWindowManager的pendingTriggers

序 本文主要研究一下storm TridentWindowManager的pendingTriggers TridentBoltExecutor.finishBatch storm-core-1.2.2-sources.jar!/org/apache/storm/trident/topology/TridentBoltExecut......

go4it
17分钟前
0
0
java实现多线程两种基本方式

我们在开发当中经常会使用到多线程,这里我们来写两个小案例通过最基本的两种方式继承Thread类或实现Runnable接口来实现一个多线程。 继承Thread类 我们可以通过继承Thread类,并重写run()方...

王子城
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部