我正在通过SoloLearn.com学习CSS3中的过渡，其中使用过渡的唯一示例与:hover选择器结合。
我可以找到的其他所有内容都使用该方法或:active，而没有解释可以使用其他选择器的内容，或者为什么除了这两个选择以外的选择器以外的其他选择器不显示为示例。
有没有一种方法可以在没有用户交互的情况下开始过渡？还是需要JavaScript？
tl;
您可以使用任何选择器启动transition，但是您实际上并不需要一个选择器。您需要的只是：
- 在元素上设置
transition属性 - 更改要过渡的属性的价值。
您可以在不使用CSS选择器的情况下进行以上两项操作，这无非是用于设置DOM元素属性的方便方法。
初始答案
transition s与一起使用任何选择器。但是它们与任何选择器无关，您实际上并不需要选择器来执行CSS过渡。
transition工作需要的只是设置以下过渡属性：
-
transition-duration， -
transition-delay， -
transition-timing-function -
transition-property。（必须有动画才能过渡到工作）。
之后，每当transition-property中命名的属性在两个动画值之间更改其值时，初始值和设定值之间的变化根据集合transition属性。。
无论是什么触发过渡性属性的变化
，这都会发生这种情况。可以：
- 更改是因为特定的CSS选择器（定义）启动或停止应用（匹配元素）;
- 使用JavaScript直接更改。
当然，通过两者的组合（即使用JavaScript应用类别，这会更改过渡的属性的价值）
因此，实际上，您的问题的答案是： transition s与任何选择器一起使用，但它们也无需使用。它们基于DOM Element属性值工作，无论选择哪种选择器。
演示transition的一种常见方法是使用:hover状态，因为一个人在选择器之间切换（即控制/演示/观察过渡）所需要做的就是。好吧，...悬停！
on：
例如，是否可以在没有用户交互的情况下开始过渡？
当然有！一个非常基本的示例是在所有页面资源完成加载时添加<body>上的类。
创建<body>元素时，它没有类，并且所有资源都完成加载后，Window的onload事件触发器。我们可以使用此事件添加课程。如果在body上正确定义了过渡，并且由于现在适用于元素的较强选择器，过渡属性会更改，则会发生过渡。没有任何用户交互。
看到它有效：
window.onload = function() {
document.querySelector('body').classList.add('loaded')
}body {
background-color: #fff;
transition: background-color 1s linear;
}
.loaded { background-color: #212121;}您还可以设置一个递归函数，该功能可以切换元素状态并在设定的时间后自动调用自身，在设定的时间后有效地将状态重新切换为连续周期：
对于上述示例，这意味着：
window.onload = toggleBodyClass;
function toggleBodyClass() {
document.querySelector('body').classList.toggle('loaded');
setTimeout(toggleBodyClass, 1234);
}body {
background-color: #fff;
transition: background-color 1s linear;
}
.loaded { background-color: #212121;}如果问题是：'选择器可以在不使用JavaScript和/或用户互动的情况下启动/停止应用？它确实转化为： 正如保莉（Paulie_d）所说，过渡是状态变化。此"状态"所指的只是任何样式属性的价值（无论如何都可以动画）。甚至规格都以相同的方式描述它： 通常，当CSS属性的值更改时，渲染结果会立即更新，受影响的元素立即从旧属性值变为新的属性值。本节介绍了一种使用新CSS属性指定过渡的方法。这些属性随着时间的流逝，用于从旧状态到新状态的平稳动画。 这意味着您实际上不需要选择器即可开始过渡。可以通过CSS，JavaScript或Inline 实际上，大多数其他在用户交互的情况下使用过渡的方法实际上都涉及JavaScript，因为CSS在不需要用户互动的情况下不支持太大的状态变化（在动画之外，这与过渡是不同的野兽），但这不是't意味着JavaScript本质上是过渡的工作所必需的，因为过渡是关于状态变化的，无论如何调用状态变化（JS与否）。 大多数教程都使用 但是，您实际上不需要使用用户交互伪类更改属性值，以便过渡工作。您可以使用任何选择器更改它们，即使用户交互是由其他元素处理的（并且该元素也不必使用 ...或页面本身... 将JavaScript添加到混音中后，您可以直接设置属性值（即不使用选择器）... ...更改元素的类，ID或其他属性... ...甚至在DOM树中移动元素（尽管此确实有限制 - 请注意，FOO项目无法开始过渡，因为它在重新连接之前已被分离，而bar一旦注意到它是现在，就可以启动其过渡，因为它永远不会离开dom树）... ...并且能够开始过渡。请注意，所有JavaScript示例都会自动开始过渡，无需用户交互。 因此，总而言之，过渡是关于国家的变化，并说国家的变化与样式属性价值的变化有关。这些独立于选择器或JavaScript，尽管选择器是CSS的基本组成部分，并且您确实需要JavaScript。
"除了通常触发 transition之外的其他事物触发的过渡是否触发？'您为什么想知道？' to ''是否有没有JavaScript和/或用户互动的Web浏览？style属性更改样式。所有这些都需要过渡，因为它们都修改了样式属性值。选择器恰好是最常见的方法，因为选择器和声明块是构成样式规则的两个基本组件，本身就是CSS的构件。:hover和:active来演示过渡，仅仅是因为用户互动是读者看到行动中的过渡的最简单，最直观的方式，并了解元素改变状态的含义（尽管是另一种状态，但，但原则是相同的）。这也是迄今为止过渡的最常见用例：对用户互动的响应状态更改。:hover或:active启动过渡）... label {
transition: color 1s linear;
}
:checked + label {
color: #f00;
}<p><input type=checkbox id=check><label for=check>Label</label>h1 {
transition: color 1s linear;
}
:target {
color: #f00;
}<p><a href=#sec1>Section 1</a> <a href=#sec2>Section 2</a>
<h1 id=sec1>Section 1</h1>
<h1 id=sec2>Section 2</h1>setTimeout(function() {
document.querySelector('p').style.color = '#f00';
}, 1000);p {
transition: color 1s linear;
}<p>Wait for it...setTimeout(function() {
document.querySelector('p.foo').className = 'bar';
}, 1000);
setTimeout(function() {
document.getElementById('foo').id = 'bar';
}, 2000);
setTimeout(function() {
document.querySelector('p[data-attr]').dataset.attr = 'bar';
}, 3000);p {
transition: color 1s linear;
}
p.bar { color: #f00; }
p#bar { color: #090; }
p[data-attr=bar] { color: #00f; }<p class=foo>Wait for it...
<p id=foo>Wait for it...
<p data-attr=foo>Wait for it...setTimeout(function() {
var ul = document.querySelector('ul');
ul.appendChild(ul.firstChild);
}, 1000);li {
transition: color 1s linear;
}
li:first-child { color: #f00; }<ul><li>Foo<li>Bar</ul>