JS-Библиотека для создания CSS3-анимаций

https://github.com/jlongster/css-animations.js
Позволяет делать анимации примерно так:

// Changing an animation

var anim = CSSAnimations.get('pulse');
anim.setKeyframe('100%', { 'background-color': 'red' });

// Dynamically creating and applying an animation

var anim = CSSAnimations.create();
anim.setKeyframe('0%', { transform: 'translateY(0)' });
anim.setKeyframe('70%', { transform: 'translateY(50px)' });
anim.setKeyframe('100%', { transform: 'translateY(150px)' });

$(el).css({ 'animation-name': anim.name,
            'animation-duration': '1s' });

$(el).on('animationend', function() {
    CSSAnimations.remove(anim.name);
});

// Changing an animation

var anim = CSSAnimations.get('pulse');

anim.setKeyframe('100%', { 'background-color': 'red' });

// Dynamically creating and applying an animation

var anim = CSSAnimations.create();

anim.setKeyframe('0%', { transform: 'translateY(0)' });

anim.setKeyframe('70%', { transform: 'translateY(50px)' });

anim.setKeyframe('100%', { transform: 'translateY(150px)' });

$(el).css({ 'animation-name': anim.name,

'animation-duration': '1s' });

$(el).on('animationend', function() {

CSSAnimations.remove(anim.name);

});

JS-Библиотека для создания CSS3-анимаций

Similar Posts

LEAVE A COMMENT Отменить ответ