keyframes在不同浏览器中的表现性
keyframes在不同浏览器中的表现性
lonelydawn 发表于2年前
keyframes在不同浏览器中的表现性
  • 发表于 2年前
  • 阅读 30
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: 本文介绍css3中keyframes在IE9以下,IE10,FF,Chrome中的表现性

一、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中表现良好

在线演示

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 41
博文 50
码字总数 52905
×
lonelydawn
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: