不需要的过渡：active css答案

【问题标题】：Unwanted transition on :active css不需要的过渡：active css
【发布时间】：2013-10-17 00:38:45
【问题描述】：

我刚刚开始学习 html 和 css，我不完全确定自己在做什么，但是..

我添加了一个 :hover 过渡，这样当我将鼠标悬停在标题“FIENDS”上时，它会从 #000000 淡化到 #800000。我已经实施了哪些，哪些有效。我还添加了 css :active，因此当我单击标题“FIENDS”时，它会立即从 #800000 切换到 #ffffff。但目前它并没有立即切换，它似乎正在使用我为 :hover 设置的过渡并淡入 #ffffff。有没有人可以解决这个问题？

谢谢。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Fiends</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content="Fiends" />
</head>
<body>
    <div>
        <h1 class="centertext"><fade>FIENDS</fade></h1>
    </div>
</body>
<html>

CSS

html {
    background-color: #ffffff}

body {
    font-family: bebas neue;
    text-align: center;}

h1 {
    color: #000000;
    font-weight: normal;
    font-size: 200px;
    letter-spacing: 15px;}

h1.centertext {
    margin: 225px auto auto auto}

fade { 
    color: #000000; 
    -webkit-transition: color .12s linear;
    -moz-transition: color .12s linear;
    -ms-transition: color .12s linear;
    -o-transition: color .12s linear;
    transition: color .12s linear;}

fade:hover {
    color: #800000;}

fade:active {
    color: #ffffff}

【问题讨论】：

标签： html css hover transition

【解决方案1】：

您可能必须使用 JavaScript 来获得所需的完整动画效果。您可以更改:active中的transition属性，例如：

fade:active {
    transition: none;
    color: #fff;
}

http://jsfiddle.net/Rppmd/

但是，transition 在不再处于活动状态时不会被覆盖，因此元素仍会淡入（即解决方案并不完美）。

使用 JavaScript，您可以完全删除 transition 并让 JS 完成所有动画。这将允许您设置动画时间，例如悬停时。在mousedown 和mouseup 上，不需要动画，只需改变颜色即可。

【讨论】：

感谢您的回答！原谅我的无知，但是 JavaScript 与 HTML 和 CSS 的关系是什么？我如何使用您建议的行动来实现我的目标？
@FiendTwo 阅读量很大：developer.mozilla.org/en-US/docs/Web/JavaScript