javascript - 通过静态插值控制关键帧动画进度

Question

假设您想通过操作 animation-delay 属性来控制 CSS 关键帧动画的进度，同时将 animation-play-state 设置为暂停。

这应该:

• 在 all browsers supporting 工作CSS Animations规范
• 基本用例至少以每秒 30 帧的速度运行

出于渲染性能和适当分离关注点的原因，您希望不要:

• 要求脚本了解受控关键帧动画插入的 CSS 属性
• 解析样式表以获得上述知识
• 在隐藏元素上运行动画并将读取的内插 CSS 属性值传输到目标元素

问题

animation-delay 技术似乎不适用于以下浏览器(问题可以在两个提供的示例中重现)

• Safari >= 8
• iOS 浏览器 >= 8
• IE >= 10
• 微软边缘

有没有办法在满足上述所有要求的同时为所有浏览器产生所需的行为？

技术

• https://css-tricks.com/debugging-css-keyframe-animations/
• https://www.youtube.com/watch?v=s4HdeJctq-A#t=26m53s

例子

• http://codepen.io/team/css-tricks/pen/LVMMGZ/ (拖动 slider )
• http://codepen.io/marionebl/pen/wKjBgQ (向下滚动)

Answer 1

问题

• 静态插值技术 outlined by Lea Verou不适用于 Chrome 和 Firefox 以外的浏览器
• 规范未涵盖 animation-play-state 与 animation-delay 的组合行为，足以明确指出 IE 和 Safari 的偏差实现。参见 http://www.w3.org/TR/css3-animations/#animation-delay和 http://www.w3.org/TR/css3-animations/#animation-play-state

解决方案

为了部分满足上述要求，我实现了 a library called jogwheel允许对通过 CSS 关键帧动画声明的动画进行时间轴控制。要实现此转轮，请执行以下操作:

• 获取给定 HTMLElement 的计算 animation-name
• 搜索 document.styleSheets 以匹配 CSSKeyFramesRule小号
• 转换找到的 CSSKeyFrameRule与即将推出的 element.animate 兼容的一系列关键帧，这是提议的一部分 WebAnimations标准
• 提供一个 API，允许控制与其时间轴长度相关的动画

要使用转盘，您必须

安装库:

npm install --save jogwheel web-animations-js

在您的 JavaScript 中:

// WebAnimations polyfill required
require('web-animations');
var JogWheel = require('jogwheel');

var element = document.querySelector('[data-animated]');
var wheel = JogWheel.create(element);
// Jumps midway into animation
wheel.seek(0.5);