文档章节

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

lonelydawn
 lonelydawn
发布于 2016/06/24 16:18
字数 1128
阅读 30
收藏 0
点赞 0
评论 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
【转】Modernizr——为HTML5和CSS3而生!

原文:http://www.osmn00.com/translation/221.html Modernizr:专为HTML5和CSS3开发的功能检测类库 Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)...

iNiL0119
2016/11/11
78
0
Modernizr——为HTML5和CSS3而生!

10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支 持即不完善又漏洞百出,所以这些人在坚持WEB标准化的同时,也不得不采用hacks来使得他们的页面...

大橙子zc
2016/03/15
43
0
30种CSS3炫酷页面预加载loading动画特效

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

柠檬酷
2015/09/10
195
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 的属性值,具体如下表: //向...

菜鸟不菜么
05/01
0
0
CSS学习笔记——一些以前被自己忽视的属性

1、HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色)。http://www.w3school.com.cn/cssref/css_colornames.asp (link里面列出了这些颜色) 2、css的尺寸(htt...

小敏virgo
2014/08/27
0
0
css3简单知识学习

CSS3简单学习 倾斜div div { transform:rotate(30deg); } css3圆角边框 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; / Old Firefox / } 边框阴影 div { box-shad......

writeademo
2016/08/02
16
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

社交系统ThinkSNS+ V1.8.3更新播报

     研发发布版本号:1.8.3   本次版本于2018年7月16日发布   本次发布类型:新增功能、细节调整与优化   社交系统ThinkSNSPlus更新体验:请于官网下载/安装最新版或联系QQ35159...

ThinkSNS账号
6分钟前
0
0
教育思考:选择编程是一场父母和孩子的和解[图]

教育思考:选择编程是一场父母和孩子的和解[图]: 之前有个很热的段子是这样讲的:深夜十点的时候,某小区一女子大声喊叫“什么关系?啊?!到底什么关系?你说!”最后发现原来是一位妈妈陪...

原创小博客
6分钟前
0
0
X64汇编之指令格式解析

最近由于项目组内要做特征码搜索的东西,便于去Hook一些未导出函数,你懂得...于是就闲着学习了一下x86/x64的汇编指令格式。x86的汇编指令格式请参照http://bbs.pediy.com/showthread.php?t...

simpower
9分钟前
0
0
rust 语法概要(只适合不熟悉时快速查阅使用,不适合理解其精髓。未完待续)

注意:本内容只适合快查,不适合理解精髓。精髓请研读 https://kaisery.github.io/trpl-zh-cn/foreword.html 基本数据类型 i8,i16,i32,i64,i128 u8,u16,u32,u64,u128 f32,f64 char bool:true...

捍卫机密
12分钟前
0
0
JS中严格模式和非严格模式

1,使用 严格模式的使用很简单,只有在代码首部加入字符串 "use strict"。必须在首部即首部指其前面没有任何有效js代码除注释,否则无效 2.注意事项 (1)不使用var声明变量严格模式中将不通...

AndyZhouX
12分钟前
0
0
Nginx配置error_page 404 500等自定义的错误页面

Nginx 做web server时, 开发中发现有时候的网站代码有错误,我们需要跳转到一个指定内容的错误页面: 1. 在nginx.conf配置文件上加上一句: fastcgi_intercept_errors on; 2. 服务中加上: er...

MichaelShu
15分钟前
0
0
微服务架构下的监控系统设计(一)——指标数据的采集展示

前言 微服务是一种架构风格,一个大型复杂软件应用通常由多个微服务组成。系统中的各个微服务可被独立部署,各个微服务之间是松耦合的。每个微服务仅关注于完成一件任务并很好地完成该任务。...

UCloudTech
20分钟前
0
0
极客时间《趣谈网络协议》之开篇词学习笔记

出于个人兴趣,本人在极客时间购买了网易研究院云计算技术部的首席架构师刘超老师关于计算机网络的专栏之《趣谈网络协议》,由于知识版权原因,不能直接分享刘超老师的原文,所以,我会在每次...

aibinxiao
22分钟前
1
0
Activiti - 新一代的开源 BPM 引擎

Activiti 背景简介、服务和功能介绍 董 娜, 狄 浩, 和 张 晓篱 2012 年 7 月 23 日发布 背景介绍 Activiti 其核心是 BPMN 2.0 的流程引擎。BPMN 是目前被各 BPM 厂商广泛接受的 BPM 标准,全...

孟飞阳
28分钟前
0
0
最有效的方式来适配

最有效的方式来进行屏幕适配 在上代码之前先把屏幕相关的几个概念搞清楚:Density、DensityDpi、ScaleDensity。这里我们不过多讲解这些概念知识。 1.0 获取设计图的屏幕尺寸:这里我以360dp...

android-key
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部