获取css3动画关键帧

var getKeyFrame = function(index, name){ var styleSheet = document.styleSheets[index], keyframesRule = [];
    [].slice.call(styleSheet.cssRules).forEach(function(item){ if (item.type == CSSRule.KEYFRAMES_RULE) { if(item.name == name){ keyframesRule.push( item );
            }
        }
    }) return keyframesRule;
}
时间: 2024-11-25 21:30:08

获取css3动画关键帧的相关文章

丝滑顺畅:使用CSS3获取60FPS动画

原文链接: Smooth as Butter: Achieving 60 FPS Animations with CSS3 在移动端使用动画元素是很容易的. 如果你能遵循我们的这里的提示, 在移动端适当的使用动画元素, 可以变得更加容易. 在这些天里, 每个人都不会适当的使用CSS3动画. 有些最佳的实践方法, 一直被忽视. 被忽视的主要原因是人们不能真正的理解,这些实践存在的真正原因, 以及为何能得到大力支持. 现在设备的规格非常多, 如果你不能通过仔细思考优化你的代码, 使用顺畅的动画, 你

css3动画详解

一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 示例:创建一个动画名叫"changecolor",在"0%&quo

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

如何使用js捕获css3动画

如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-animation: flash 1s ease 3; -moz-animation: flash 1s ease 3; -ms-animation: flash 1s ease 3; -o-animation: flash 1s ease 3; animation: flash 1s ease 3;

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezier.com/ 如何用贝塞尔曲线画曲线 一个标准的3次贝塞尔曲线需要4个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 无论SVG, Canvas还是CSS3动画,都牵扯到这4个

css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢. 从广义上

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

CSS3 动画效果总结【转】

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及animation. transform rotate设置元素顺时针旋转的角度,用法是:transform: rotate(x);参数x必须是以deg结尾的角度数或0,可为负数表示反向.scale设置元素放大或缩小的倍数,用法包括:transform: scale(a);                  

css3动画机制原理和实战

这段时间喜欢上css3动画效果了,关于这个每个人都有不同的看法,在我个人看来css3在做一些小页面的动画效果还是很好用的,一些简单的小动画要是用js的话,未免浪费. 要是做大一点的话最好js+css3相结合,这样既有js的高效控制力,也有css3的操作效果.不多废话了,下面看具体操作吧 首先要了解css3的动画原理和基本操作属性 做过flash或者gif动画的人都知道动画的效果无非就是图片.关键帧和时间动作组成. 首先了解@keyframes 规则(说白了就是css3做动画的一个规定命名) 定义