CSS3 unification javascript solutions

Question

I am creating several small iPad client applications for an iPad application that loads the corresponding application into UIWebview. Now I am making them a cross browser and should include some backups for animations and CSS transitions using JavaScript.

My specific webkit implementation uses CSS classes for all animations / transitions for which the start and end states are known at design time using the add / remove class in javascript and using the corresponding webkitTransitionEnd / webkitAnimationEnd events.

For "dynamic" transitions, I have a simple "animation" function that simply applies style properties to the corresponding elements.

I would like the internal API for applying transitions to be as similar as possible to the current implementation, by simply adding / removing classes, etc. Usually I have CSS and js file (both reduced) for the application.

So, a few questions / points that I would rate on any input:

• Problems with IE7 / 8 - IE9.js

• Dynamically adding prefixes for a specific provider - "jquery.css3finalize" has been found so far.

• Transition to the class: "jquery.animateToClass" - it seems that searching for style sheets every time a class is applied, should the corresponding classes be cached during further searches? Is this a slow / resource hunger?

• "@keyframe": javascript "" CSS3. "doAnimationWithClass" css3, , " " , css3- ( ) jQuery.animate( ), .

, :

CSS

@-webkit-keyframes an-animation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.an-animation {
  -webkit-animation-name: an-animation;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
}

JS:

var animations = {
    an-animation: {
      keyframes: [
      { 
        duration: '',
        timing: 'linear',
        props: {
          opacity: 0
        }
      },
      { 
        duration: '0.5s',
        timing: 'linear',
        props: {
          opacity: 1
        }
      },
      { 
        duration: '0.5s',
        timing: 'linear',
        props: {
          opacity: 0
        }
      }
    ]
  }
};

var animationClasses = [
  an-animation: {
    name: 'an-animation';
    duration: '1s';
    timing: 'linear';
    count: 2;
  }
];

function doAnimationWithClass(className) {
  if (modernizer.cssanimations) {
    //normal implementation
  }
  else {
    //lookup class in animationclasses
    //lookup relevant animation object in animationHash
    //pass to animation chaining function
  }
}

.. ( /).

, , .

Answer 1

, . js. , css - . JS- . . css js ( css js-).

var myFrame = {
  '0%': {
    left: 0,
    top: 0
  },
  '25%': {
    left: 100,
    top: 100
  },
  '50%': {
    left: 0,
    top: 300
  },
  '100%': {
    left: 0,
    top: 0
  }
};

var keyframes = {
  set: function($el, frames, duration) {
    var animate;
    animate = function() {
      var spendTime;
      spendTime = 0;
      $.each(frames, function(idx, val) {
        var stepDuration, stepPercentage;
        stepPercentage = idx.replace('%', '') / 100;
        stepDuration = duration * stepPercentage - spendTime;
        $el.animate(val, stepDuration);
        return spendTime += stepDuration;
      });
      return setTimeout(animate, duration);
    };
    return animate();
  }
};

keyframes.set($('#mydiv'), myFrame, 2000); 

• demo: http://jsbin.com/uzodut/4/watch

Answer 2

http://addyosmani.com/blog/css3transitions-jquery/

Answer 3

, . easing, jQuery ie8 parallax (. CSS parallax background of stars) :

var animations = {
    'STAR-MOVE': {
        '0%': {
            'background-position-x': '5%',
            'background-position-y': '5%'
        },
        '100%': {
            'background-position-x': '1300%',
            'background-position-y': '600%'
        }
    }
};

var keyframes = {
  set: function($el, frames, duration, easing) {
    var animate;
    animate = function() {
      var spendTime;
      spendTime = 0;
      $.each(frames, function(idx, val) {
        var stepDuration, stepPercentage;
        stepPercentage = idx.replace('%', '') / 100;
        stepDuration = duration * stepPercentage - spendTime;
        $el.animate(val, stepDuration, easing);
        return spendTime += stepDuration;
      });
      return setTimeout(animate, duration);
    };
    return animate();
  }
};

keyframes.set($('.midground'), animations['STAR-MOVE'], 150000,'linear');
keyframes.set($('.foreground'), animations['STAR-MOVE'], 100000,'linear');