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

Question

假设您希望在animation-delay设置为暂停时操纵animation-play-state属性来控制CSS关键帧动画的进度。

应该：

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

由于渲染性能和正确分离关注点的原因，您希望不：

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

问题

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

• Safari＆gt; = 8
• iOS Safari＆gt; = 8
• IE＆gt; = 10
• Microsoft Edge

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

技术

• 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/（拖动滑块）
• 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关键帧动画声明的动画。要实现这个方法，请执行以下操作：

• 获取给定animation-name
的计算HTMLElement
• 搜索document.styleSheets以匹配CSSKeyFramesRule s
• 将找到的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);