transitionとlinear-gradient

Question

transitionを使用して背景画像をゆっくり変化させたいボタンがあります

ボタンのクラスに

• background: -moz-linear-gradient(-45deg, #fcf4b0 0%, #f2bd37 100%);
• background: -webkit-linear-gradient(-45deg, #fcf4b0 0%,#f2bd37 100%);
• background: linear-gradient(135deg, #fcf4b0 0%,#f2bd37 100%);
• filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf4b0', endColorstr='#f2bd37',GradientType=1 );
• -webkit-transition: all 1s ease;
• -moz-transition: all 1s ease;
• -o-transition: all 1s ease;
• transition: all 1s ease;

ホバーに

• background: #FEFFC7;
• background: -moz-linear-gradient(-45deg, #f2bd37 0%, #fcf4b0 100%);
• background: -webkit-linear-gradient(-45deg, #f2bd37 0%,#fcf4b0 100%);
• background: linear-gradient(135deg, #f2bd37 0%,#fcf4b0 100%);
• filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2bd37', endColorstr='#fcf4b0',GradientType=1 );

を仕込みましたがtransitionの秒数が反映されず、瞬時に切り替わってしまいます

以前似たようなことをやったことがあるので可能であることは判明しています
（当時は疑似クラスを仕込んでいたかもしれません）
linear-gradientがあやしいと思っているのですが、なぜtransitionが作動しないのかわかっていません…

初めての質問で、いろいろと不躾な箇所があるかもしれません
何卒ご容赦ください

ご助力お願いいたします

Answer 1

グラデーションをはめ込むのに使うのはbackground-imageですが（backgroundはそのショートハンド）、それをtransitionの対象とすることはできません（CSS3ドラフト）。

代わりに、グラデーション自体を半透明にしておいて、その背景に入れる色へtransitionをかける、という手法があるようです（参考）。

Comments

[mezzot]

ありがとうございます
ショートハンドを背景色のように使用してしまっていました
グラデーションを移動させたかったのですが、今のわたしの技術では難しそうなので、
再度別のデザインを検討してみます
ありがとうございました