warning : this post is based on previous posts. be sure you read them.
Modifing CSS keyframe values is one of limitations of css that we are trying to fix. dynamic-CSS cannot modify values in css style cheat but only, it can use them inside 'Animation' or 'Transition' values.
In this tutorial we will try to change the behavior by changing duration.
Code
-----------------------------------------------------------
//key frame
@-webkit-keyframes test{
0%{
background : red;
}
50%{
background:green;
}
100%{
background : blue;
}
};
-----------------------------------------------------------
//javascript
$('#container').children().filter('div').dcss(
{
animation : 'test <dur>s 0s ease-in-out alternate infinite'
},
{
dur : function(i,el,c){return 1 + Math.random() * 5;},
});
-----------------------------------------------------------
Modifing CSS keyframe values is one of limitations of css that we are trying to fix. dynamic-CSS cannot modify values in css style cheat but only, it can use them inside 'Animation' or 'Transition' values.
In this tutorial we will try to change the behavior by changing duration.
Code
-----------------------------------------------------------
//key frame
@-webkit-keyframes test{
0%{
background : red;
}
50%{
background:green;
}
100%{
background : blue;
}
};
-----------------------------------------------------------
//javascript
$('#container').children().filter('div').dcss(
{
animation : 'test <dur>s 0s ease-in-out alternate infinite'
},
{
dur : function(i,el,c){return 1 + Math.random() * 5;},
});
-----------------------------------------------------------
intresting.
ReplyDeleteWhat you think about chang the Parameters in an animate() and during an animate().
Fro example, move a div to left and during change the width of dive than the value of Move to left change itselft after the change of width of the div?