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)

e.className = "attention";  // 添加类
e.className = "";   // 移除类

e.classList()

e.disabled = true;

document.styleSheets[0].disabled;

var firstRule = document.styleSheets[0].cssRules[0];

ss.insertRule(".name {color:blue}", 0);

ss.deleteRule(0);