使用 jQuery/Javascript 编辑 CSS3 动画
Edit CSS3 animation with jQuery/Javascript
是否可以编辑这样的动画
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
85% { -webkit-transform: rotate(1442deg); }
94% { -webkit-transform: rotate(1438deg); }
100% { -webkit-transform: rotate(1440deg); }
}
使用JavaScript?
提前谢谢你,
马迪奥
最简单的方法应该是jQueryKeyframes插件:https://github.com/jQueryKeyframes/jQuery.Keyframes
它为您提供了一个简单的语法,因此您的示例应如下所示:
$.keyframe.define([{
name: 'rotation',
0% { 'transform': 'rotate(0deg)' },
85% { 'transform': 'rotate(1442deg)' },
94% { 'transform': 'rotate(1438deg)' },
100% { 'transform': 'rotate(1440deg)' }
}]);
通过JS注入CSS的手动方法也应该有效。
相关文章:
- 关键帧之间的css3动画延迟
- 访问css3动画的关键帧
- CSS3动画图像质量按比例
- jQuery鼠标输出调用CSS3动画
- 使用带有onclick事件的Javascript启动CSS3动画
- 在 CSS3 动画完成后重新加载 JavaScript
- 如何正确地链接调用$.show()和$.thoggClass()来触发CSS3动画
- css3动画文本居中对齐
- Chrome在尝试从Javascript修改CSS3动画时崩溃
- 如何用Javascript覆盖CSS3动画
- 在没有关闭H/W加速的情况下优化CSS3动画会让它在GPU上运行得更快吗
- 如何使用JavaScript对象编写CSS3动画
- jQuery有没有,或者有没有jQuery插件,内置了监听CSS3动画事件的功能(例如animationEnd)
- 如何内联或通过javascript设置css3动画
- css3动画使用html5数据属性
- css3 动画中的虚线边框动画
- CSS3 动画和 JavaScript 类切换后的动画出现问题
- 停止并重新启动 CSS3 动画
- 展开 CSS3 动画不起作用
- CSS3 动画 - 无限悬停箭头