SVG анимация блик элемента

#css #html5 #svg #анимация #css_animation

Как при наведении на SVG-элемент реализовать эффект блика (когда осветлённый градиент
проходит через весь элемент). Желательно без SMIL анимации, чтобы анимация касалась,
как иконки, так и текста.



.game_block__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 300px;
  height: 110px;
  outline: none;
  background: none;
  transition: .2s all;
}

.game_block__play svg {
  fill: #FE20A4;
  stroke: #2F0E3D;
  stroke-width: 2;
  stroke-miterlimit: 10
}

.game_block__play text {
  font-size: 74px;
  font-family: Arial, sans-serif;
  transform: translate(110px, 84px);
}




    

Ответы

Ответ 1

Анимация градиента в зоне действия треугольного значка

Для адаптивности перенёс кнопку из css в svg. Обернул svg контейнером 

При такой схеме вёрстки кнопку с анимационными эффектами можно вставить в любое место
страницы HTML и позиционировать, масштабировать по мере своей необходимости. 

Анимация начинается по клику begin="svg1.click" при желании можно сделать по наведению
курсора begin="svg1.mouseover"  



.container {
 width:25%;
 height:25%;
 }

  
  




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

Анимация в этом примере и в других, которые ниже начинается после клика на кнопке
begin="svg1.click" при желании можно сделать по наведению курсора begin="svg1.mouseover"


.container {
 width:50%;
 height:50%;
 
 }

  





Изменяем цветовую гамму, - чёрно-белый вариант, для этого меняем значения в атрибутах
градиента stop-color  



.container {
 width:45%;
 height:45%;
 
 }

  





Чёрно-желтый вариант 



 .container {
 width:45%;
 height:45%;
 
 }

  





Диагональный градиент

Для этого добавляем в определение градиента: 

 

Анимация только значка 



.container {
 width:100%;
 height:100%;
 
 }

  





Анимация значка и букв  



.container {
 width:100%;
 height:100%;
 
 }

  



Ответ 2

Пример



.game_block__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 300px;
  height: 110px;
  outline: none;
  background: none;
  transition: .2s all;
  overflow: hidden;
}

.game_block__play svg {
  fill: #FE20A4;
  stroke: #2F0E3D;
  stroke-width: 2;
  stroke-miterlimit: 10
}

.game_block__play text {
  font-size: 74px;
  font-family: Arial, sans-serif;
  transform: translate(110px, 84px);
}

.game_block__play:before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255,
255, .3) 100%);
  transform: skewX(-25deg);
}

.game_block__play:hover:before {
  animation: blick 1.25s forwards;
}

@keyframes blick {
  100% {
    left: 125%;
  }
}