CSS3:动画大全
2016-05-11 19:23
686 查看
和过渡的区别
页面不用明显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>
相关文章推荐
- css中的强制换行
- WPF中Grid实现网格,表格样式通用类
- Box Shadow(阴影)-Css3演示 工具
- Box Shadow(阴影)—Css3演示 工具
- CSS学习(九)——构造颜色、背景和图像
- CSS3-制作加载指示条
- css3-动画
- 样式选择器的使用方法&优先级问题
- css样式选择器
- 简单的转盘抽奖——CSS动画优化
- CSS重设(reset)方法总结
- css 给span 增加width无效
- CSS outline
- 解决 输入框input width 在IE8和chrome 显示不一样
- 解决 输入框input width 在IE8和chrome 显示不一样
- css3 box-sizing属性
- WPF中Grid实现网格,表格样式通用类
- CSS z-index 属性的使用方法和层级树的概念
- CSS布局-负边距
- CSS 实现:两栏布局(一边固定,一边自适应)