css после перехода gradient on hover

Question

Я проверил множество других вопросов здесь, но не могу найти ответ на вопрос. У меня есть блок div с: после селектора css, где я делаю наложение градиента на изображении. чем у меня есть небольшой разброс градиента, когда кто-то идет: наведите указатель на div

это работает, и изменения градиента ... но я не могу получить работу с скоростью этого изменения с помощью переключателя css.

это мой код ..

.fotka-box::after { 
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */ 
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */ 
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */ 
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* ie10+ */ 
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%); /* w3c */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000',GradientType=0); /* ie6-9 */ 

-webkit-transition: all 1350ms ease-in-out; 
-moz-transition: all 1350ms ease-in-out; 
-o-transition: all 1350ms ease-in-out; 
transition: all 1350ms ease-in-out; 

display: block; 
position: absolute; 
top: 0; 
right: 0; 
height: 370px; 
max-height: 100%; 
left: 0; 
pointer-events: none; 
content: ''; 
} 


.fotka-box:hover::after { 
background: -moz-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ff3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75))); /* safari4+,chrome */ 
background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* safari5.1+,chrome10+ */ 
background: -o-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* opera 11.10+ */ 
background: -ms-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* ie10+ */ 
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); /* w3c */ 
} 

что я делаю неправильно здесь? спасибо за любые предложения.

PS: Я знаю, что могу использовать непрозрачность, но хочу изменить цвет и стиль градиента. Не показывать от 0 до 1. непрозрачности

Answer 1

Посмотрите на этой странице для градиентных переходов в CSS: https://stackoverflow.com/a/6542623/2872279

В принципе, градиенты реально не поддерживают переходы на данный момент.

Если вы хотите, замирание в действие с фоновым градиентом, вы имеют установить непрозрачность на элемент контейнера и «transition` непрозрачность.