********************************************************************************

********************************************
Gradient:
Gradients are smooth transitions from one color to another. How to create a back
ground image which consists of multiple colors?
background-image: linear-gradient(starting_point, starting_color, color_stop, st
op_position, ending_color);
1) The starting point of the gradient defining a straight line on which the grad
ient runs to the ending point.
2) The starting color (the first color stop).
3)
4) Defines the position of the color stop on the gradient axis.
5) The ending color (the last color stop).
background-image: linear-gradient(-45deg, red, green, blue);
http://www.css3files.com/gradient/
********************************************************************************
********************************************
transition:
Animating elements using css. Changing shape and size is possible.
.cls1
{
width:80px;
height:80px;
background:green;
transition:width 2s, height 2s;
}
The effect will start when the specified CSS property changes value. A typical C
SS property change would be when a user mouse-over an element:
.cls1:hover
{
width:200px;
height:200px;
}
********************************************************************************
********************************************
How to stop currently running animation & pending animations in queue?
function stopAllAnimations()
{
$("div").stop(true, true);
$("table").stop(true, true);
}
stop's description:
stop(remove_pending_animations_in_queue, complete_current_animation_immediately)
;
********************************************************************************
********************************************
In iPad, $("#id1").animate() doesn't work correctly if z-index is set for id1. T
hat's why z-index is set in complete function below.
Sometimes animate wouldn't work correctly if we animate left or top. To fix this
use:

table, div {backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz

-backface-visibility:hidden; -webkit-transform: translateZ(0); -moz-transform:
translateZ(0);}
http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-r
equestanimationframe/
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
http://stackoverflow.com/questions/11388495/css3-transform-animation-doesnt-rend
er-so-well-in-safari-uiwebview
http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/
What is backface visibility? Why it is causing animation problem?
It says whether the back of the element is visible when its back is facing the u
ser. EX: when it has been rotated or moved.
When back space is visible, the element needs to be drawn for each and every mov
e. This is CPU consuming.
Experiencing performance issues with single/minimal-page applications? Perhaps y
our code is causing "Layout Thrashing"
This article provides very good insight to how to prevent invalidating layout un
der the covers when using calls like offsetHeight.
It's important to know what's going on behind the scenes if performance is essen
tial.
It also covers using Speed Tracer, a Chrome Extension by Google that can be valu
able in finding these types of issues.
http://kellegous.com/j/2013/01/26/layout-performance/
In IOS6, animation will get struck. To fix this, use ios6-timers.js from followi
ng url:
https://gist.github.com/3798925
********************************************************************************
********************************************
$(".slice").animate(
{left:100,top:250},
{
step: function(now,fx)
{
if(fx.prop == "left")
{
var scl = 0.5 + (parseInt(fx.state) * 0.5);
var transform = 'scale(' + (scl) + ')';
$('.slice').css('-moz-transform', transform);
$('.slice').css('-webkit-transform', transform);
}
},
duration:1000,
complete:function()
{
$('.caZoomContainer').css('z-index', '6');
}
},
'linear'
);
<img class="slice" src="img/alarm_big.png">
--> We are animating from (164,54) to (100,250).
now = 164, fx =

{"options":{"duration":1000,"curAnim":{"left":100,"top":250},"orig":{}},"elem":{
"jQuery1341560551951":6},"prop":"left","startTime":1341560577848,"start":164,"en
d":100,"unit":"px","now":164,"state":0,"pos":0}
now = 54, fx =
{"options":{"duration":1000,"curAnim":{"left":100,"top":250},"orig":{}},"elem":{
"jQuery1341560551951":6},"prop":"top","startTime":1341560577851,"start":54,"end"
:250,"unit":"px","now":54,"state":0,"pos":0}
********************************************************************************
********************************************
How zoom or scale an element?
.slice {
-moz-transform-origin: 50% 50%;
-moz-transform:scale(2.5);
-webkit-transform-origin: 50% 50%;
-webkit-transform:scale(2.5);
}
This makes image 2.5 times than original.
<img class="slice" src="img/3.jpg">
********************************************************************************
********************************************
var navDuration = 150; //time in miliseconds
var navJumpHeight = "0.45em";
$(this).animate({ top : "-="+navJumpHeight }, navDuration);
$(this).animate({ top : "-=50"});
********************************************************************************
********************************************
$('#nav_move').animate(
{
width: $(this).width()+20,
height: $(this).height()+20,
left: 100
},
{ duration: 350, easing: 'easeInOutCirc' }
);
********************************************************************************
********************************************
var cbk = function(){};
$("#id1").animate({opacity: 0.5}, 100, cbk);
Note: opacity needs to be set back to 1.0.
********************************************************************************
********************************************
$('#id').hide('fast') and $('#id').show() wouldn't work.
Either mention animation in both or don't mention animation in both. Do not mix
animation and no animation.
********************************************************************************
********************************************
#ImageViewer_animationDiv

{
-webkit-transition-property: margin-left;
-webkit-transition-duration: 1.5s;
margin-left: 0px;
}
document.getElementById("ImageViewer_animationDiv").style.marginLeft = 100;
document.getElementById("ImageViewer_containerDiv").addEventListener(
'webkitTransitionEnd',
function(event)
{},
false
);
Like webkitTransitionEnd, there exists webkitAnimationEnd.
********************************************************************************
********************************************
Dynamically change webkit animation properties:
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/S
afariVisualEffectsProgGuide/Transforms/Transforms.html
http://developer.apple.com/safari/library/codinghowtos/Mobile/GraphicsMediaAndVi
sualEffects/index.html
After css animation, final value needs to be set. Otherwise element will go to p
re-animation values:
http://waynepan.com/2008/08/08/iphone-css-animations-thoughts-and-issues/
********************************************************************************
********************************************