Как создать анимацию с градиентом, чтобы заполнить всю кнопку - PullRequest
Новая
       12

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

3 голосов
/ 03 ноября 2019

У меня есть кнопка с линейным градиентом, и я хочу навести эту кнопку с анимацией от линейного градиента до одного цвета. В данном случае от линейного желто-красного до просто красного. 

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 35%, yellow 100%);;
  color: transparent;
}
button:hover {
   animation: ex 4s ease-out;
}

@keyframes ex {
  from {
    background: linear-gradient(to left, red 35%, yellow 100%);
  }
  to {
    background: linear-gradient(to right, red 35%, red 100%);;
  }
}
<button class="button">xxxxxx</button>

Ответы [ 2 ]

1 голос
/ 03 ноября 2019

Вот еще одна идея, где вы можете анимировать background-color: 

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 35%, transparent 100%);
  background-color:yellow;
  transition:2s background-color;
  color: transparent;
}
button:hover {
   background-color:red;
}
<button class="button">xxxxxx</button>

Еще один с background-position

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to right, yellow, red 32.5%);
  background-size:200% 100%;
  transition:2s background-position;
  color: transparent;
}
button:hover {
   background-position:right;
}
<button class="button">xxxxxx</button>
0 голосов
/ 03 ноября 2019

Вы можете использовать вставную красную тень, чтобы скрыть ее. Кроме того, в этом случае лучше использовать переход. Переход будет работать, когда вы прекратите зависание элемента, даже в середине анимации. 

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 0, red 77%, yellow 100%);
  background-size: 200%;
  color: transparent;
  box-shadow: inset 0 0 0 200px transparent;
  transition: box-shadow 4s ease-out;
}

.button:hover {
  box-shadow: inset 0 0 0 200px red;
}
<button class="button">xxxxxx</button>

И если вы действительно хотите использовать анимацию (проверьте, что произойдет, когда вы прекратите зависание элемента): 

.button {
  margin-top: 50px;
  padding: 10px 50px;
  border: unset;
  border-radius: 5px;
  background: linear-gradient(to left, red 0, red 77%, yellow 100%);
  background-size: 200%;
  color: transparent;
  transition: box-shadow 4s ease-out;
}

button:hover {
   animation: ex 4s ease-out;
}

@keyframes ex {
  from {
    box-shadow: inset 0 0 0 200px transparent;
  }
  to {
    box-shadow: inset 0 0 0 200px red;
  }
}
<button class="button">xxxxxx</button>
...