[f]添加css3动画的方法

添加css3的一些动画的属性

使用方法：

css3(oDiv[0], 'scale', 300)('rotate', 300);
css3(oDiv[0], 'animation', '"dd" .50s ease-in-out 0s');

ps：可以完成一个变形继续下一个变形；

　　dd为具体动画的样式；

@-webkit-keyframes 'dd' {
        0% { -webkit-transform:rotate(0deg);
    }
        50% {-webkit-transform:rotate(40deg);
    }
        100% {-webkit-transform:roate(70deg);
    }
}

函数如下：

function css3(obj, attr, value) {
  if (arguments.length == 2) {
    if (attr == 'scale' || attr == 'rotate' || attr == 'rotateY' || attr == 'translateZ') {
      var arr = ["Webkit", "Moz", "O", "ms", ""];
      var sVal = '';
      if (!obj.$Transform) {
        obj.$Transform = {};
      }
      for (var i = 0; i < arr.length; i++) {
        obj.style[arr[i] + "Transform"] = sVal;
        switch (attr) {
          case 'scale':
            sVal = typeof(obj.$Transform[attr]) == 'number' ? obj.$Transform[attr] : 100;
            break;
          default:
            sVal = obj.$Transform[attr] ? obj.$Transform[attr] : 0;
        }
      }
    }
    var sCur = obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr];
    if (attr == 'opacity') {
      return parseInt(parseFloat(sCur) * 100);
    } else {
      return parseInt(sCur);
    }
  } else
  if (arguments.length == 3) {
    switch (attr) {
      case 'scale':
      case 'rotate':
      case 'rotateY':
      case 'translateZ':
      case 'animation':
        setCss3(obj, attr, value);
        break;
      case 'width':
      case 'height':
      case 'paddingLeft':
      case 'paddingTop':
      case 'paddingRight':
      case 'paddingBottom':
        value = Math.max(value, 0);
      case 'left':
      case 'top':
      case 'marginLeft':
      case 'marginTop':
      case 'marginRight':
      case 'marginBottom':
        obj.style[attr] = value + 'px';
        break;
      case 'opacity':
        obj.style.filter = "alpha(opacity:" + value + ")";
        obj.style.opacity = value / 100;
        break;
      default:
        obj.style[attr] = value;
    }
  }
  return function(attr_in, value_in) {
    css(obj, attr_in, value_in)
  };
}

function setCss3(obj, attr, value) {
  var sTr = "";
  var sVal = "";
  var arr = ["Webkit", "Moz", "O", "ms", ""];
  if (!obj["$Transform"]) {
    obj["$Transform"] = {};
  }
  if (attr == 'animation') {
    for (var i = 0; i < arr.length; i++) {
      obj.style[arr[i] + 'Animation'] = value;
    }
  } else {
    obj["$Transform"][attr] = parseInt(value);
    for (sTr in obj["$Transform"]) {
      switch (sTr) {
        case 'scale':
          sVal += sTr + "(" + (obj["$Transform"][sTr] / 100) + ") ";
          break;
        case 'rotate':
        case 'rotateY':
          sVal += sTr + "(" + (obj["$Transform"][sTr]) + "deg) ";
          break;
        case 'translateZ':
          sVal += sTr + "(" + (obj["$Transform"][sTr]) + "px) ";
          break;
      }
    }
    for (var i = 0; i < arr.length; i++) {
      obj.style[arr[i] + "Transform"] = sVal;
    }
  }
}