Fork me on GitHub

李可

导航

CSS3:动画大全

和过渡的区别

页面不用明显js调用；
   过渡：必须有：hover visited 等伪类调用。（本质还是事件驱动）
   动画：页面加载上就可以。
页面有js调用：

7个参数，*为可选

animation-name   
animation-duration  执行时长
*animation-timing-function  和过渡一样http://www.cnblogs.com/leee/p/5481693.html
*animation-delay   延迟多少时间 ms s
*animation-iteration-count  循环次数默认为 1 （反方向也算一次）。无限循环infinite。 
*animation-direction 偶数反向播放alternate 正向方向 normal
*animation-fill-mode 回撤位置none、forwards（保持动画最终）、backwards（保持动画开始） 或 both（同时2中状态，没用过）

播放 暂停 属性

animation-play-state 播放状态（ running 播放 和paused 暂停 ）

缺点：

1,写起来复杂。至少3个针对浏览器的animation+至少3个针对浏览器的#keyframe，
2没法动态改变目标点位置(animation-fill-mode)

关键帧：

数字：0%、25%、100%等
字符：from(0%)、to(100%)

JS结合

参考http://www.cnblogs.com/leee/p/5481693.html

obj.addEventListener('webkitAnimationEnd', function (){}, false); webkit
obj.addEventListener('AnimationEnd', function (){}, false); firfox

例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes move
{
	0%{
		width:100px;
	}
	100%
	{
		width:200px;
	}	
}
  @-moz-keyframes move
{
	0%{
		width:100px;
	}
	100%
	{
		width:200px;
	}	
}
    @keyframes move
{
	0%{
		width:100px;
	}
	100%
	{
		width:200px;
	}	
}
.box{width:100px;height:100px;background:red; -webkit-animation:move 2s 1s ease-in-out 4 alternate forwards; -moz-animation:move 2s 1s ease-in-out 4 alternate forwards;animation:move 2s 1s ease-in-out 4 alternate forwards;}
.box:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;animation-play-state:paused }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

posted on 2016-05-11 19:23  李可在江湖  阅读(529)  评论(0)  编辑  收藏  举报