Ron*_*ald 3 css css-selectors css-transitions
我正在通过 sololearn.com 学习 CSS3 中的过渡，其中给出的使用过渡的唯一示例与:hover选择器结合使用。
我能找到的所有其他东西都使用它，或者:active没有解释可以使用哪些其他选择器，或者为什么不显示这两个以外的选择器作为示例。
有没有办法在没有用户交互的情况下开始转换？或者这需要 JavaScript 吗？
您可以使用任何选择器来启动transition，但您实际上并不需要它。您只需要：
transition元素的属性您可以在不使用 CSS 选择器的情况下完成上述两种操作，这只不过是一种可用于设置 DOM 元素属性的便捷方法。
transitions 可以使用任何选择器。但是它们与任何选择器都没有关系，并且您实际上不需要选择器来执行 CSS 转换。
您只需要transition设置以下过渡属性即可工作：
transition-duration,transition-delay,transition-timing-functiontransition-property. （必须是动画过渡到工作）。此后，每当名为 in 的属性transition-property在两个可动画值之间更改其值时，初始值和设置值之间的更改将根据设置的transition属性发生。
无论是什么触发了过渡属性的值的变化，都会发生这种情况
它可以：
或者，当然，通过两者的组合（即使用 JavaScript 来应用一个类，这会改变正在转换的属性的值）
因此，实际上，您的问题的答案是：transitions 可以与任何选择器一起使用，但它们也可以在没有选择器的情况下使用。它们基于 DOM 元素属性值工作，与任何选择器无关。
演示 a 的一种常用方法transition是使用:hover状态，因为在选择器之间切换（即控制/演示/观察转换）所需要做的就是使用状态。嗯，……悬停！
在：
例如，有没有办法在没有用户交互的情况下开始转换？
当然有！一个非常基本的例子是<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 和/或用户交互的情况下开始/停止应用？” 它真的转化为：
“是否有其他东西触发的转换而不是通常触发 a 的东西transition？” ，可能的答案有：
“你为什么想知道？” 到“是没有JavaScript和/或用户交互有网页浏览？”