本篇文章给大家带来的内容是关于js如何写出css动画 ？js写css动画的方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用settimeout()或者setinterval()使用这两个函数定时调用一段代码。这是其原理。
目的，重复修改内联样式，达到动画的效果
通过在相同的时间内构造出一帧帧的内容，然后让其在函数的作用下不断的改变css的值，达到动画的效果
js写css动画
// 将e转化为相对定位的元素，使得其可以左右移动// 第一个参数为元素对象或者元素的id// 如果第二个参数是函数，以e为参数，它将在动画结束时调用// 第三个参数指定e移动的距离，默认为5像素// 第四个参数指定移动多久，默认500毫秒function shake(e, oncomplete, distance, time) { // 句柄函数 if (typeof e === string) e = document.getelemnentbyid(e); // 如果传入的是对象的id则获取对象的id，如果传入的为元素（元素为对象）则直接跳过这一句 if (!time) time = 500; // 如果time是空值，则直接使用默认值 if (!distance) distance = 5; // 如果未指定移动的距离，则默认为5像素 var originalstyle = e.style.csstext; // 获取元素e的css样式 e.style.position = relative; // 设置为相对定位 var start = (new date()).gettime(); // 设置动画开始的时间,获取一个格林威治时间 animate(); // 动画开始 // 函数检查消耗时间，并更新e的位置 // 如果动画完成，它将e还原为原始状态 // 否则，将会更新e的位置，安排其自身重新运行 function animate() { var now = (new date()).gettime(); // 获取现在的时间 var elapsed = now-start; // 从开始以来消耗了多长时间 var fraction = elapsed / time; // 为总时间的几分之几 if (fraction < 1) { // 如果动画未完成 // 作为动画完成比例的函数，计算e的x位置 // 使用正弦函数将完成比例乘以4pi // 所以，它将来回往返两次 var x = distance * math.sin(fraction * 4 * math.pi); // 使用正弦函数实现每秒四帧 e.style.left = x + px; // 在25毫秒后或在总时间的最后尝试再次运行函数 // 目的是为了产生每秒40帧动画 settimeout(animate, math.min(25, time-elapsed)); // 使用天花板函数再次调用，再次移动 } else { // 否则动画完成 e.style.csstext = originalstyle; // 恢复原始样式 if (oncomplete) oncomplete(e); // 产生一个回调函数 } }}// 以毫秒级的时间将e从完全不透明淡出到完全透明// 在调用函数时假设e是完全不透明的// oncomplete 是一个可选函数，以e为参数，它将在动画结束的时调用// 如果不指定time，默认为500毫秒function fadeout(e, oncomplete, time) { if (typeof e === string) e = document.getelementbyid(e); if (!time) time = 500; // 使用math.sqrt作为一个缓动函数创建动画 // 非线性函数，一开始淡出的较快，然后逐步的缓慢 var ease = math.sqrt; var start = (new date()).gettime(); // 动画开始的时间 animate(); // 动画开始 function animate() { var elapsed = (new date()).gettime()-start; // 消耗的时间 var fraction = elapsed/time; // 总时间的几分之几 if (fraction < 1) { // 如果动画未完成 var opacity = 1 - ease(fraction); // 计算不透明度 即 完成一次变换，开方 e.style.opacity = string(opacity); // 设置透明度 settimeout(animate, // 进行下一帧 math.min(25, time-elapsed)); // 在25毫秒之后或者在总时间的最后再次调用 }else { e.style.opacity = 0; // 使得e完全透明 if (oncomplete) oncomplete(e); // 在结束的时候回调 } }}
查询计算出的样式
getcomputedstyle(e)
275个样式。。。o__o …
脚本化css类
除了能脚本化内联样式，同样的也能脚本化css的类
移除，添加类
e.classname = attention; // 添加类e.classname = ; // 移除类
显示类列表
classlist
只读属性，返回元素类属性的实时集合。
e.classlist()
脚本化样式表
开启和关闭样式表
style和link元素的cssstylesheet对象定义了一个在js中可以设置和查询的disabled属性。
关于disabled属性，该属性在html中不属于规范的一部分，在html中不存在，但是，在dom中存在该属性。在标签中无法设置该属性，但是可以在脚本中设置该属性如果值为true，样式表关闭，否则样式表打开
e.disabled = true;
这样样式表即可关闭。
类似的通过以下方式也可
document.stylesheets[0].disabled;
查询，插入与删除样式表规则cssstylesheet对象同样也定义了用来查询，插入和删除样式表规则的api
查询所有样式表内容var firstrule = document.stylesheets[0].cssrules[0];
document.stylesheets[0] 一个只读属性，返回一个该文档的链接或嵌入的样式表
该样式只读，不可进行插入和删除
其中selectortext为css选择器
csstext 为css的文本样式
添加和删除规则insertrule()和deleterule()这两种方法，达到添加和删除规则
还有一个addrule()方法
insertrule()方法insertrule()和deleterule()这两种方法，达到添加和删除规则
ss.insertrule(.name {color:blue}, 0);
在ss样式表中，在第0条cssrules中添加一条css规则。使得类为name的字体变蓝
如果添加的索引已经存在则不会覆盖，所有的索引加1，然后进行插入
deleterule()方法删除样式规则
删除上一条插入的样式
ss.deleterule(0);
删除第0条规则，样式继续保持从0开始
创建新的样式表这个不难，直接插入一个新的style元素通过innerhtml的方式将其插入新的css内容，或者直接插入link标签，设置添加一个html的属性使用的是 element.setattritube()方法，将rel的值设置为stylesheet 然后在用同样的方法添加src属性
纯粹的dom 和 bom的操作，不涉及任何样式表的内容
相关推荐：
css 和 js 动画哪个更快_html/css_web-itnose
css动画结束后 js无法修改translated值 ._html/css_web-itnose
以上就是js如何写出css动画 ？js写css动画的方法（代码）的详细内容。