Как анимировать радиальный градиент с помощью CSS?

#css #html5 #svg #css_animation #градиент

Я пытаюсь создать эффект анимации блеска с радиальным градиентом для блока div, но
я не уверен, что мой способ, - лучший способ сделать это.    

Я не нашел других решений для достижения того, чего я хочу получить. 
Примеры, которые я нашел, - это просто эффекты блеска, которые выглядят как наложение.     

Большинство примеров, которые я нашел, выглядит так:   http://jsfiddle.net/nqQc7/512/.

Ниже то, что у меня пока получилось:



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  /*background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%,
#ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%);*/
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite;
}

@keyframes colorChange {
  0% {
    background: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%,
#ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  50% {
    background: radial-gradient(ellipse farthest-corner at top, #FFFFFF 0%, #ffb3ff
8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  100% {
    background: radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%,
#ffb3ff 8%, #ff33ff 25%, #800080 62.5%, #b300b3 100%)
  }
  /*0% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 0;  }*/
  /*10% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 1;  }*/
  /*40% { transform: translateY(-20vh) translateX(17vw) ; opacity: 1; }*/
  /*50% { transform: translateY(-20vh) translateX(17vw) ; opacity: 0; }*/
  /*60% { transform: translateY(-20vh) translateX(17vw) ; opacity: 1; }*/
  /*90% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 1; }*/
  /*100% { transform: translateY(-20vh) translateX(-7vw) ; opacity: 0; }*/
}

  Shine





Возможно ли и как,  заставить белый блеск сверху плавно переходить слева направо? 
    

Ответы

Ответ 1

Вы можете сделать градиент по-разному и анимировать его позицию. Хитрость состоит
в том, чтобы удвоить размер градиента и сделать так, чтобы значение stop-color составляло
половину их фактических значений, чтобы сохранить тот же визуальный градиент, а затем
анимировать его слева направо.    


Он не будет выглядеть точно так же, как градиент, который вы
определили в анимации из-за вычисления дальнего угла



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff
12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position:top left;
  }
}

  Shine




Чтобы приблизиться к вашему примеру с градиентами, вы также можете
анимировать размер:



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff
12.25%, #800080 31.25%, #b300b3 50%) top right/400% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate linear;
}

@keyframes colorChange {
  from {
    background-position:top 0 left 33%;
    background-size:400% 200%;
  
  }
  50% {
    background-position:top center;
    background-size:200% 200%;
  }
  to {
    background-position:top 0 right 33%;
    background-size:400% 200%;
  }
}

  Shine




Вы также можете сделать ту же анимацию с учетом псевдоэлемента и
transform, чтобы иметь лучшую производительность:    



#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  overflow:hidden;
  position:relative;
  z-index:0;
}
#shine-div:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:400%;
  height:200%;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff
12.25%, #800080 31.25%, #b300b3 50%);
  animation: colorChange 5s infinite alternate linear;
}

@keyframes colorChange {
  from {
    transform:translateX(-50%);
  }
  50% {
    transform:scaleX(0.75) translateX(-50%)
  }
  to {
    transform:translateX(-25%);
  }
 }

  Shine



Ответ 2

Решение SVG

Все фильтры, градиенты, маски, клипы пришли в CSS из SVG. Поэтому необходимо добавить
решение c SVG градиентами.  

Всё в принципе повторю из css решения, те же цвета в stop-color, те же проценты в
stop offset, но анимация получается более мощной и зрелищной.   

Горизонтальное перемещение градиента   

Анимация достигается изменением значения параметра fx радиального градиента, отвечающего
за горизонтальную координату центра градиента. 

Запуск анимации - клик по прямоугольнику




  
  





Атрибут keyTimes обеспечивает неравномерность движения, количество значений должно
равняться количеству значений в атрибуте values  Подробнее здесь.

  values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"


Вертикальная анимация градиента 

В этом случае анимируется fy  




  
  





Анимация по диагонали  

Анимируются одновременно оба параметра fx, fy




  
  





Анимация по наведению курсора  

Условие запуска анимации:   begin="rect1.mouseover"