CSS-トランジションが動作しない

Question

こんにちは、私は現在、あなたが背景をパープルにし、テキストカラーが白に変わったときにトランジションをしようとしています。（元々は背景色もテキストカラーも黒です... ）

しかし、それは動作していません！

私が間違っているのは何ですか？

a:hover { 
    color: white; 
    -webkit-transition: color 1000ms linear; 
    -moz-transition: color 1000ms linear; 
    -o-transition: color 1000ms linear; 
    -ms-transition: color 1000ms linear; 
    transition: color 1000ms linear; 
    background-color: purple; 
    -webkit-transition: background-color 1000ms linear; 
    -moz-transition: background-color 1000ms linear; 
    -o-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
} 

そう/// EDIT誰もが代わりの上でそれを追加するために私に言って続けて：ホバー...

初期状態：

text-color:black; 
background:none; 

推移状態：

へのスムーズな移行：

私はこれが皆に役立つことを願っています お時間をありがとう！

Answer 1

A（ないホバー）にそれらを入れて、あなたが複数のトランジションをしたい場合、あなたはそれらを一緒に宣言する必要があります。

-webkit-transition: color 1000ms linear, background-color 1000ms linear; 

http://jsfiddle.net/4zhnP/1/

Answer 2

：hoverプロパティに遷移を設定しないでください。

a { 
color: white; 
-webkit-transition: color 1000ms linear; 
-moz-transition: color 1000ms linear; 
-o-transition: color 1000ms linear; 
-ms-transition: color 1000ms linear; 
transition: color 1000ms linear; 
background-color: purple; 
-webkit-transition: background-color 1000ms linear; 
-moz-transition: background-color 1000ms linear; 
-o-transition: background-color 1000ms linear; 
-ms-transition: background-color 1000ms linear; 
transition: background-color 1000ms linear; 
} 

次に、:hoverプロパティで実際に変更されているものを設定します。例えば 、

a:hover{ 
color:green; 
} 

Answer 3

あなたが代わりにa:hoverの、aにトランジションを設定してみてください。

あなたがここに遷移に関する詳細な情報を見つけることができます：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions