В Chrome не работает анимация атрибута offset для линейного градиента

#javascript #css #svg #css_animation #svg_animation

Отвечая на вопрос: Как анимировать градиентную непрозрачность в SVG? 

столкнулся со странным поведением анимации атрибута offset 

Ниже код, который прекрасно работает в Firefox, но любые попытки анимировать атрибут
offset линейного градиента окончились ничем. 

Подойдут любые решения данной проблемы с помощью: SVG, CSS, CSS3, JS 



	




Пробовал также использовать проценты и gradientUnits ="objectBoundingBox"



	


 

Но это не принесло положительного результата в Chrome   

В Firefox и этот вариант работает отлично.
    

Ответы

Ответ 1

Вот решение на JS, тут нужна зависимость от времени, по которой мы будем менять атрибут:



requestAnimationFrame(animateOffsets);

// если функция вызвана как колбек requestAnimationFrame, 
// то первым аргументом у нее идет время от старта сцены
function animateOffsets(t) { 
  requestAnimationFrame(animateOffsets);
  t = t%5000/5000; // будет меняться от 0 до 1 в течение 5 секунд
  t = Math.sin(t*Math.PI*2); // будет менятся от -1 до 1 
  stop1.setAttribute('offset', `${50 + t*50}%`);
}



Ответ 2

Решение CSS

Вот идея только с CSS, где вы можете полагаться на два градиента и translation/opacity
animation, чтобы добиться нужного эффекта:  



.box {
  border-radius:20px;
  width:200px;
  height:200px;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:220%;
  height:220%;
  animation:translate 2s infinite linear alternate;
}
.box:after {
  background:
    linear-gradient(to bottom right,dodgerblue 0%,white 40%,gold 60%);
  animation-name:translate,show;
  opacity:0;
}
.box:before {
  background:
    linear-gradient(to bottom right,dodgerblue,white 50%,gold 50%);
}

@keyframes translate{
  from {
    transform:translate(48%,48%);
  }
}
@keyframes show{
  30%,85% {
    opacity:1;
  }
}







Источник ответа: @Temani Afif


Ответ 3

Опубликовал аналогичный вопрос на англ. SO

Предложили интересное решение, - заменить проценты в параметре values="100%;0%;100%"
на values="1;0;1"   

И это решение стало работать в Chrome:



	


  

Источник ответа: @enxaneta