//create keyframes
var rotateAnim = Amo.keyframes({
'transform': 'rotate(0deg)'
}, {
'transform': 'rotate(360deg)'
//create animate
}).animate({
// animation iteration count
time: -1,
// animation timing function
easing: 'linear'
});
//run animate & return animate instance
rotateAnim.run(document.getElementById('demo-1'));
//create keyframes
var moveAnim = Amo.keyframes({
left: '20px'
}, {
left: '480px'
}).animate({
time: -1,
// animation-direction: normal|alternate;
direction: 'alternate'
});
// animation instance
var moveAnimIns = moveAnim.run($('#demo-2'));
$('#btn-start').on('click', function(){
// start the animation instance
moveAnimIns.start();
});
$('#btn-stop').on('click', function(){
// stop the animation instance
moveAnimIns.stop();
});
//create keyframes
var sizeAnim = Amo.keyframes({
'border-radius': 10,
width: 10,
height: 10
}, {
'border-radius': 120,
width: 120,
height: 120
}).animate({
//animate times
time: 5,
//animate duration at one time
duration: 800,
direction: 'alternate'
});
//callback
sizeAnim.run($('#demo-3'), function() {
$('#demo-3').css('background', '#ddd');
});
//create keyframes
var colorAnim = Amo.keyframes({
0: {
'background-color': 'red'
},
20: {
'background-color': 'green'
},
50: {
'background-color': 'blue'
},
80: {
'background-color': 'yellow'
},
100: {
'background-color': 'gray'
}
}).animate({
time: -1,
direction: 'alternate'
});
var demo4Ins = colorAnim.run($('.demo-4'));
