This particular page of the documentation was helpful:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition
(e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.
So you can call a specific property, like opacity, or you can use all in a class name. I think the latter is possibly more useful, even if you have only one property to apply.
Basically, you can use a class with the all transition properties and toggle the class name. One of the things I found interesting was that you can actually do multiple versions on the class add (not quite the same effect occurs when removing the class, though). Also, couple opacity with width and height and it will work better than using display: none, as far as I could tell.
The below demonstrates how you could use the -webkit-transition property in layers. This is a simplified version, followed by a more sophisticated demonstration:
#block.transition let's me differentiate my transition properties:
<div id="block" class="transition"></div>
Basic properties, not animated:
#block {
margin: 25px auto;
background: red;
}
The initial "unseen" state:
#block.transition {
opacity: 0;
width: 0;
height: 0;
padding: 0;
-webkit-transition: all 2s ease-in-out;
}
And the animation steps:
#block.transition.show {
opacity: .3;
width: 50px;
height: 50px;
background: orange;
-webkit-transition: all .5s ease-in-out;
}
#block.transition.show {
opacity: .4;
width: 150px;
height: 150px;
background: black;
-webkit-transition: all 1s ease-in-out;
}
#block.transition.show {
opacity: 1;
padding: 100px;
background: blue;
-webkit-transition: all 3s ease-in-out;
}
Note, all I'm doing here is toggling the .show class:
$(document).ready(function load(){
var $block = $("#block");
$('.toggle').click(function c(){
$block.toggleClass('show');
});
});
Demo (Source)
Markup
<p><button class="toggle">Toggle Blocks</button></p>
<div id="block" class="transition">
<div class="blocks transition"></div>
<div class="blocks transition"></div>
<div class="blocks transition"></div>
</div>
CSS
The containing #block:
#block {
margin: 25px auto;
background: #333;
-webkit-transition: opacity, display, width 1.5s ease-in-out;
}
#block.transition {
opacity: 0;
width: 0;
padding: 0;
border: 1px solid yellow;
-webkit-transition: all 1.9s ease-in-out;
}
#block.transition.show {
opacity: .3;
border-color: blue;
-webkit-transition: all .5s ease-in-out;
}
#block.transition.show {
opacity: 1;
width: 550px;
padding: 25px;
border-width: 15px;
-webkit-transition: all 3s ease-in-out;
}
Group of three .blocks:
.blocks {
display: inline-block;
background-color: red;
}
.blocks.transition {
opacity: .1;
width: 0;
height: 0;
margin: 0;
-webkit-transition: all 1.7s ease-in-out;
}
.blocks.transition.show {
opacity: 1;
width: 150px;
height: 150px;
margin: 10px;
-webkit-transition: all 4.5s ease-in-out;
}
jQuery
$(document).ready(function load(){
var $block = $("#block"),
$blocks = $block.find(".blocks.transition");
$('.toggle').click(function c(){
$block.toggleClass('show');
$blocks.delay(1500).toggleClass('show');
});
});
Demo (Source)
