xanim

JavaScript

var myComponent = Ext.create('Ext.panel.Panel',{
    renderTo: Ext.getBody(),
    width: 270,
    itemId: 'myPanel',   
    style: {
        width: '10px',
        height: '10px',
        'background-color': '#5687FF'
    },
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name'
    }, {
        fieldLabel: 'Last Name'
    }]
});
Ext.create('Ext.fx.Anim', {
    target: myComponent.getEl(),
    duration: 8000,
    keyframes : {
        '0%': {
            opacity: 0.6
        },
        '60%': {
            x: 120,
            y: 120,
            opacity: 1
        },
        '80%': {
        },
        '100%': {
            x: 0,
            y: 0,
            opacity: 0
        }
    },
    listeners: {
        keyframe: function(o, n) {
            console.log('transition:', n);
        }
    }
});