CSS动画

Super Liu

（按空格、上、下、左、右键跳转，按R键显示DEMO）

superliu(刘小超)
SNG社交网络事业群\128社交用户体验设计部\成都设计中心
2006年 - 中国票务在线
2007年 - 腾讯

2007年 - 音乐盒,音乐miniPortal,活动……
2008年 - 音乐盒,音乐miniPortal,活动……
2009年 - QzonePortal,音乐盒,活动……
2010年 - Qzone商城,黄钻活动,开放平台……
2011年 - Qzone商城,开放平台,LBS……
2012年 – 朋友网,空间营收……
2013年 – 空间营收……

为什么使用CSS动画?

方便
性能好
这是未来

使用方便

使用Chrome的持续绘制模式侦测页面绘制时间

如果希望创建流畅的体验和交互，页面渲染应该在每秒60帧以上（即60FPS以上），根据FPS的定义：1000 ms / 60 Hz = 16.6 ms。记住这一指标：每一帧的渲染时间应该保持在16ms以下。

CSS3

jQuery

性能好

更可使用硬件GPU加速

transform: translateZ(0);

transform: translate3d(0, 0, 0); /* webkit */

被解放的GPU

内核统计

webkit统计

主流浏览器支持
这是未来

怎么使用CSS动画?

查查文档
使用工具
不断使用
别人怎么用
思考

Transition: all .5s ease-in-out 1s;

贝塞尔曲线工具

Transition 工具

不断使用

定位 + Transition (~ 同级选择器)

Animation 属性顺序
animation: move2 3000ms ease 0 1 normal both;

Animation Keyframes
-webkit- 非加不可
-moz- 从FF16开始用animation 和 transform 等
-ms- IE10开始不用加，IE9不支持CSS animation
-o- OPERA从15版本起，改用blink内核

animation-timing-function:step-start; (马上转跳到动画结束状态)

animation-timing-function:steps(3, start); (逐帧动画)

CSS动画的控制

Transitions动画，使用变量保存停止时的样式

animationStart 开始(一次)
animationIteration 迭代(多次)
animationEnd 结束(一次)
transitionEnd 结束(一次)

element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";

背景不随屏幕滚动 background-attachment:fixed;

-webkit-clip-path:polygon() 多边形切割

background 支持多背景图片

工作流程
实现思路
High Performance Animations
动画

工作流程

第一步：绘制基本图形；
第二步：分解动画keyframes；
第三步：编写调用keyframes的animation；
第四步：通过animation或CALSS或JS来控制动画。

实现思路

过程式
组件式
或者还有面向对象?

animate.css

CSS3 Animation Cheat Sheet

Performant CSS transitions & animations

liffect effect for lists

High Performance Animations

High Performance Animations

动画

动画

动画

站在科技与艺术的交叉点上的人才能做出最好的产品
3Q

黑屏请按 R 键显示DEMO