文档的这个特定页面很有帮助：
transition-property – 应该为什么属性设置动画，例如不透明度。
transition-duration – 过渡应该持续多长时间。
transition-timing-function – 过渡的计时函数（例如，线性与缓入与自定义三次贝塞尔函数）。
过渡——所有三个属性的简写。
因此，您可以调用特定属性，例如opacity，也可以all在类名中使用。我认为后者可能更有用，即使您只有一个属性要应用。
基本上，您可以将 aclass与all转换属性一起使用并切换类名。我发现有趣的一件事是，您实际上可以在classadd 上执行多个版本（不过，在删除类时会出现不完全相同的效果）。此外，据我所知，opacity与widthand结合height使用会比使用更好。display: 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;
}
三人组.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');
});
});
演示（来源）