مشکل با عنصر transition در گرادینت ها

[Alireza Xn 1644]

من یه مشکلی که توی عنصر transition دارم اینکه این عنصر برای گرادینت ها کار نمیکنه !

ایا برای هاور کردن تاخیری گرادینت ها از عنصر دیگه ایی اضافه میشه یا المانت خاصی داره ؟؟

الان این کد برای گرادینت ها کار نمیکنه و transition جواب نمیده ...

.more{
background: rgb(73,155,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(32,124,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
border:2px solid #f4f2f2;
border-radius:5px;
color:#fff;
font-family:'BKoodakBold';
font-size:14px;
padding:5px 10px;
text-align:center;
width:50px;

-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;

}




.more:hover{
background: rgb(99,182,219); /* Old browsers */
background: -moz-linear-gradient(top, rgba(99,182,219,1) 0%, rgba(48,157,207,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(99,182,219,1)), color-stop(100%,rgba(48,157,207,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b6db', endColorstr='#309dcf',GradientType=0 ); /* IE6-9 */

-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;

}

ویرایش شده آذر 92 توسط RapiD AM

[imanfakhar 26231]

گرادنیت درسته که با ترکیب رنگها درست می شه ولی در واقع تصویر پس زمینه است برای تغییر زمان دارش یا باید از جی کوئری و تابع animate استفاده کنید یا باید با استفاده از سایز زمینه بهش حرکت بدید

.class   {
    background-size: 100% 200%;
background-position:left 0%;
}
.class:hover {
background-position:left 50%;
}