• 注册
热门标签
↑ 收起导航

CSS3 animation 动画属性

CSS3 animation 属性,可以创建动画,可以取代许多网页动画图像,如Flash动画,和JAVAScripts。

同样也可参考 jQuery animate() 方法。

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

注解

animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。

CSS3 @keyframes 规则

要创建CSS3动画,就得了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
	from {background: red;}
	to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background: red;}
	to {background: yellow;}
}

浏览器支持

Internet Explorer 10,Firefox,Opera 和 Google Chrome Safari 支持 CSS3 animation(动画)属性。

Safari和Chrome通过私有属性 -WebKit-animation 支持。

注意: Internet Explorer 9 及更早IE版本不支持动画属性。

使用方法

使用简写CSS属性把 animation 绑定到一个

元素:

div{
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

注解

默认值:	none 0 ease 0 1 normal
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.animation="mymove 5s infinite"

示例

<!DOCTYPE html>
<html>
<head>
<style> 
.test{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:my_style_move 5s infinite;
	-webkit-animation:my_style_move 5s infinite; /*Safari and Chrome*/
}

@keyframes my_style_move
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes my_style_move /*Safari and Chrome*/
{
	from {left:0px;}
	to {left:200px;}
}
</style>
</head>
<body>

<p>注意: Internet Explorer 9 及更早IE版本不支持动画属性。</p>

<div class="test"></div>

</body>
</html>

再看一个示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释: </b>当动画完成时,会变回初始的样式。</p>


<p><b>注意: </b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>
</html>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/1476.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册