文档章节

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

lonelydawn
 lonelydawn
发布于 2016/06/24 16:18
字数 1128
阅读 32
收藏 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
粉丝 42
博文 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
开发一个移动端相册

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

boogoogle
2016/02/26
75
0

没有更多内容

加载失败,请刷新页面

加载更多

使用xtrabackup完成远程备份

转载收藏,以防丢失 需求 Can I backup remote databases from my local server02-27-2013, 06:17 AMHi, I am using mysqldump so far for taking daily backups of my Production datab......

阿dai
4分钟前
0
0
OSChina 周五乱弹 —— 心情超级好开始乱删库

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 手机党少年们想听歌,请使劲儿戳(这里) 把生命除去上班时间, 都开心不起来。 @真Skr小机灵鬼儿: 你才不孤独呢, 想想你早起, @for。:这...

小小编辑
5分钟前
0
2
为什么你的python版本一团糟?因为少了这个操作

坑人的版本 Python 的版本问题一直是个广被吐槽的黑点。以至于有人调侃说: Python 是世界上最好的两种语言! 在这里我要说明下,对于初学者来说,版本间的语法差异其实并不大。现在刚开始学...

crossin
昨天
2
0
Cannot forward after response has been committed

声名:转载自CSDN 通过toncat启动服务器,可以正常登陆访问,登陆进去选择子系统的时候点击登陆的时候,可是去又回到了登陆界面,如此反复就是不能够进入子系统,查看后台报的错误: java.la...

小橙子的曼曼
昨天
2
0
shell编程(告警系统邮件引擎、运行告警系统)

告警系统邮件引擎 1.如果要使用邮件引擎功能,需要调用mail.py文件,放到/usr/local/sbin/mon/mail/目录下即可,具体内容如下: #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,s...

蛋黄_Yolks
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部