Develop Reference

Unicef web animations

Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?

In the Unicef animation the developers are using a mix approach of JavaScript using GSAP JS library and CSS Transitions.
You can have a looks at their code in bundle.js and screen.css files using Chrome developer tools.
Generally you can use:
CSS Keyframe Animation
CSS Transitions
JavaScript vanilla or some libraries
Web Animation API
to animate DOM elements in your HTML page.
To help you to get started I have created a simple scale/zoom effect using CSS Keyframe Animation, but you can reach a similar effect using JavaScript libraries as jQuery, GSAP, Velocity or others.
For more complex animations I would suggest to use a specialized JS library as GSAP, if instead you need more simple, eyes catching animations you could consider also using some pre-made effects:
animate.css (CSS Keyframe Animation)
animatelo.js (Web Animation API) - disclaim I have created this library :)
It really depends of the complexity of you animation and your skill set.
#mario {
background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
background-repeat: no-repeat;
width: 375px;
height: 375px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: leaves 5s ease-in-out infinite alternate;
animation: marioAnim 5s ease-in-out infinite alternate;
}
#-webkit-keyframes marioAnim {
0% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(2.0);
}
}
#keyframes leaves {
0% {
transform: scale(1.0);
}
100% {
transform: scale(2.0);
}
}
<div id="mario"></div>

Transition misbehavior

I have several problems with transition behavior, probably they are the same single problem.
First class of problems with a short transitions.
<style>
.someclass {
transition: all 1s linear;
}
</style>
<script>
function activationcode()
{
//$('.someclass').hide(); was in display none state.
$('.someclass').css('opacity', 0);
$('.someclass').show();
$('.someclass').css('opacity', 1);
}
</script>
Add in most of cases this code doesn't work as expected. The .someclass item appears in final state. The changing property doesn't matter, opacity is just for example. To make it working the two things helps: a) changing all for transition to the particular property, for this example to opacity; b) call $('.someclass').css('opacity', 1); with delay, for example, 100ms.
But this only reduce probability of problem to very low value, doesn't fix it.
Second class of problem is for a long animation. It works, but if you put it inside the tab (or anything like that), and will start to switch from animated tab to other one, the animation may be finished in a final state before the specified time. Single switch/switch-back usually doesn't break animation. But two or more switches does with very high probability.
I can reproduce this on Firefox (not very recent). Initially was reported for Chrome (reporter states that he uses the last one version).
I suspect that the problem does depend on amount of css/js activity on page (was unable to reproduce second problem with minimal jsfiddle).
So the question is how to fix such problems, does any solution exist?

Place the line...
$('.someclass').css('opacity', 1);
...in a setTimeout(fn, 0). This will defer its execution, ensuring that the browser won't optimise those steps into one paint (show the element at 100% opacity).

I suggest that you use classes instead and handle show/hide in CSS only
.hide {
display: none;
opacity: 0;
transition: opacity 1s linear 0s, display 0s linear 1s;
/* decrease opacity, then change display with a delay */
}
.show {
display: block;
opacity: 1;
transition: display 0s linear 0s, opacity 1s linear 0s;
/* change display instantly without delay, then increase opacity */
}
By delaying the hiding for 1s, you allow the opacity transition to complete before hiding it.
But we reset the delay on the showing because we need people to see the opacity increasing.

animate scale and rotate separately with css3 and jquery

UPDATED and CLARIFIED
I need to execute some jquery that does an immediate rotate (using css3 transform) on an icon. And then once the icon is rotated I want to animate and scale to 200% of the size. However, since scale and rotate are both one CSS3 property (transform) I am seeing that both of the transitions are occurring as an animation for 0.5s. (in the JQUERY code I also update the location (top, left), but since that is not in the transition: tag, it happens immediately as required).
What I want is the rotate to happen immediately, and the scale to happen over 2s. Any ideas?
CSS:
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
JQUERY:
self.pick = function (cmd) {
var pt = Tools.cmdToPoint(cmd);
$(self.bbox).css("position", "fixed");
$(self.bbox).css("top", pt.y - 32);
$(self.bbox).css("left", pt.x - 32);
$(self.bbox).css("opacity", "1");
var theta = self.angle(cmd);
$(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
$(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
}
What happens is that since transition on the item, both the scale and the rotate occur in an animation over 0.5s.

You really have 2 options, but I think nested div's will most likely be your best option. You can use jQuery to control the timing of certain animations, but it will require a decent amount of coding to get it right.
Per Andrea Ligios comment, you should set a delay on the two class so that the transition starts after 0.5s
HTML
<div id="rotate" class="half rotate">
<div id="scale" class="two grow">Rotate</div>
</div>
CSS
.half {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.two {
transition: all 2s ease-in-out 0.5s;
-webkit-transition: all 2s ease-in-out 0.5s;
}
#rotate, #scale {
height: 150px;
width: 100px;
text-align: center;
margin: 0 auto;
}
#scale {
border: 1px blue solid; /*for visualization*/
}
.rotate:hover {
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
.grow:hover {
transform: scale(2.0);
-webkit-transform: scale(2.0);
}
Here is a CSS demo fiddle : http://jsfiddle.net/adjit/w4kgP/5/
Your jQuery option involves setting timeouts, the only thing is the reverse animation doesn't go exactly in the reverse order. It will shrink and un-rotate with an interval of .5s. You can ofcourse also set a timeout for mouseout
jQuery Option
$('#rotate-scale').hover(function(){
clearTimeout(timeout);
$this = $(this);
$this.addClass('rotate');
timeout = setTimeout(function(){
$this.css("-webkit-transition", "all 2s ease-in-out");
$this.addClass('grow');
}, 500);
}, function(){
clearTimeout(timeout);
$(this).css("-webkit-transition", "all 0.5s ease-in-out");
$(this).removeClass('rotate');
$(this).removeClass('grow');
});
Here is a jQuery demo fiddle : http://jsfiddle.net/adjit/tR7EY/1/

Short answer: Use GSAP.
Long answer: CSS3 transform properties cannot really be individually animated, unless you happen to be good with transformation matrixes and are ready to write a lot of supporting code for a better animation system. Not only would you have to deal with converting the transform properties into transforms matrices, but you'd also need some sort of system to dynamically mix different matrix states to be actually able to decouple timings. This requires a lot of advanced mathematics and development time, which would most likely be better spent elsewhere.
EDIT: Further reading: How to read individual transform values in js
EDIT2: Depending on what exactly you're trying to do, you might be able to separate the animations by splitting them across several nested divs. Eg. The outermost div handles the scale animation and within it is a div with a rotation animation. CSSdeck example

Scrollbar not visible and CSS3 transition not working in MOZ

I've created a webpage which has two main div's and those being displayed on button clicks.
FIDDLE.
Problem is when I click the first button, the first div is moved -150% on y-axis using the css3 transform and the second div appears.
When i click the button on the second div, second div is moved down on y-axisand the first div is visible. But when the first div is visible, scrollbar is not visible.
To check whether the scrollbar is visible or not in the firefox the css3 transitions are not working in the firefox.
And everything in the webpage is working only on fullscreen. If i resize the window order of everything is misplaced and i couldn't click on the button too.
Someone please help me in fixing this.
CSS3:
.summary-hidden {
-webkit-animation: top 0.6s ease both;
}
.content-visible {
-webkit-animation: top 0.6s ease both;
}
.content-hidden {
-webkit-animation: bottom 0.6s ease both;
}
.summary-visible {
-webkit-animation: bottom 0.6s ease both;
overflow-y: visible;
}
#-webkit-keyframes top {
from {-webkit-transform: translateY(0%);}
to {-webkit-transform: translateY(-110%);}
}
#-moz-keyframes top {
from {-moz-transform: translateY(0%);}
to {-moz-transform: translateY(-115%);}
}
#-webkit-keyframes bottom {
from {-webkit-transform: translateY(-110%);}
to {-webkit-transform: translateY(0%);}
}
#-moz-keyframes bottom {
from {-moz-transform: translateY(-110%);}
to {-mo-ztransform: translateY(0%);}
}
JQUERY:
$('.button-summary').click(function() {
$('#container').removeClass('summary-visible').addClass('summary-hidden');
$('#content').removeClass('content-hidden hide').addClass('content-visible show');
});
$('.button-content').click(function() {
$('#container').removeClass('summary-hidden').addClass('summary-visible')
$('#content').removeClass('content-visible show').addClass('content-hidden hide');
});

Based on what I am seeing in your fiddle you do not actually have a non-prefixed
animation property, even though you have defined -moz-keyframes rules.
http://caniuse.com/#feat=css-animation
Currently you can use the unprefixed animations property for pretty much any recent version of Mozilla (which according to that link has always supported the spec sans-prefix).
It is worth mentioning to note that really you do not need to insert the -moz prefix for the keyframes rules unless you need to support Firefox versions before v16 (http://paulrouget.com/e/unprefixing-in-firefox-16/).
Personally, I wouldn't even just use -webkit and -moz without covering my bases with (at minimum) the unprefixed version of the property, or even included -o, -ms (depends on the client and situation). Always insure your CSS has a fallback so the page will display more consistently across different browsers.
I added the non-prefixed version of your animation properties to the fiddle and it appears to work just fine in firefox (I think, its harder to say because the code doesn't appear to be 100% finished).

Have an element with 2 CSS Animations executing at the same time

I am experimenting with WebKits animations.
Is it possible for a HTML element to have more than one animation executing at the same time?
For example:
#-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
Is this possible...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
#-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}

#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.

You'll have to manually merge the animations, I think.
If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.