Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Anim Native (gallery-anim-native) on cdn

Last Updated: 09/24/12

+ 0 -

Stephen Murphy

YUI Contributor

See 4 more by this user.

Created: 09/21/12
Last CDN Push: 10/3/12
Build Tag: gallery-2012.10.03-20-02
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.2
Free for use.

Anim Native provides a drop-in CSS3 replacement for the Anim class. The Transition module should be sufficient for most use cases, however there are times when using native keyframes are necessary.

Anim docs:
http://yuilibrary.com/yui/docs/anim/

W3C CSS Animations:
http://www.w3.org/TR/css3-animations/

Browser support:
http://caniuse.com/#feat=css-animation
IE10+, FF5+, Chrome 4+, Safari/iOS 4+, Android 2.1+

Tags:
twobit anim css3

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

Code Sample

<script src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.03-20-02'
}).use('gallery-anim-native', function(Y) {
    var anim = new Y.Anim({
        node: '#test',
        duration: 5,
        iterations: 'infinite', // 'infinite' or int
        reverse: true,
        direction: 'alternate',
        from: {
            background: function(node) {return 'red';}
        },
        frames: {'50%': {
            background: 'green',
            backgroundColor: 'red'
        }},
        to: {
            background: 'blue'
        }
    });
    anim.run();
});