ドキュメントのこの特定のページは役に立ちました：
transition-property –不透明度など、どのプロパティをアニメートする必要があるか。
遷移期間–遷移が続く時間。
遷移タイミング関数–遷移のタイミング関数（たとえば、線形vs.イーズインvs.カスタム3次ベジェ関数）。
遷移–3つのプロパティすべての省略形。
したがって、などの特定のプロパティを呼び出すことも、クラス名でopacity使用することもできます。all適用するプロパティが1つしかない場合でも、後者の方がおそらく便利だと思います。
基本的にclass、alltransitionプロパティでを使用して、クラス名を切り替えることができます。私が興味深いと思ったことの1つは、class追加で実際に複数のバージョンを実行できることでした（ただし、クラスを削除したときにまったく同じ効果が発生するわけではありません）。また、とを組み合わせるとopacity、私が知る限り、を使用するよりもうまく機能します。widthheightdisplay: none
以下は、-webkit-transitionプロパティをレイヤーで使用する方法を示しています。これは簡略化されたバージョンであり、その後にさらに洗練されたデモンストレーションが続きます。
#block.transition遷移プロパティを区別してみましょう。
<div id="block" class="transition"></div>
アニメーション化されていない基本的なプロパティ：
#block {
margin: 25px auto;
background: red;
}
初期の「見えない」状態：
#block.transition {
opacity: 0;
width: 0;
height: 0;
padding: 0;
-webkit-transition: all 2s ease-in-out;
}
そしてアニメーションのステップ：
#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;
}
ここで行っているのは、.showクラスを切り替えることだけです。
$(document).ready(function load(){
var $block = $("#block");
$('.toggle').click(function c(){
$block.toggleClass('show');
});
});
デモ（ソース）
マークアップ
<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>
<strong> CSS
含む#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;
}
3つのグループ.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');
});
});
デモ（ソース）