前端技术周刊 2019-01-07：CSS 动画

2019-01-07

前端快爆

• Chrome 72 已经进入了 beta 阶段。新增：公有类成员的声明和初始化、一些 DevTools 新功能（可视化性能指标、高亮 text nodes、复制节点的 JS 访问路径）等；废弃：页面 unload 的时候将不能使用 window.open() 打开一个新页面了，出于安全考虑不再渲染 FTP 协议下的文件，统一改为下载。?

点评：在更新日志中还提到 "support for private class fields is coming soon." ，贺老的怒火恐怕难以平息了……

• Flutter 1.0 发布，Flutter 是一款基于和 Chromium 同源的 Skia 图形库和 Dart 语言，以高速和跨平台为卖点的 UI 框架。?

点评：Flash 的思路交织 Google 的技术！附一段 Flutter 开发者访谈。

• Firefox 66 实现了 Dynamic（动态）import()，需要在开启 about:config 中启用 javascript.options.dynamicImport 开关，此前，Chrome 63、Safari 11.1 均已经支持。?

全民目击

这是一个全新的符合阿里妈妈营销平台定位的特色栏目，我们将选择一些被广泛传播或新奇有趣的线上产品和营销案例在这里分享，希望能带来一些视觉、创意、技术融合的启发。

腾讯新闻：重回 1978

腾讯新闻为纪念改革开放四十年制作，通过重力感应使一个球掉落到不同的时代记忆中。?

我与 TapTap 的两周年

可以自由滚动的横向画卷，配合滚动时的视差效果让人获得惊奇体验。?

蚂蚁庄园背后的技术与思考

刚刚召开的 D2 论坛中悠鹤分享了蚂蚁庄园这一拥有海量用户的产品背后的技术与思考，官方文稿还没出，先通过枪版一睹为快。?

专题：CSS 动画

本周为 @净翼(dongshitou) 为我们带来的 CSS 动画专题。

基础

• CSS Animation 的属性详解
• CSS Transition 的标准与兼容
• 前端中的变换矩阵

优化

• 如何使用 Timeline 工具
• Timeline 中一帧的解剖
• 避免大型、复杂的布局和布局抖动
• 正确的 GPU 加速动画
• 关键渲染路径
• CSS Triggers

DEMO

• CSS Factory
• 按钮描边动画
• 时钟加载动画
• steps() 行走的猫
• Google 风格的加载动画

---

本期编辑：@池冰；审阅：@承虎；专题供稿：@净翼。