Цветовой импульс разбит на линейный градиент. Как исправить «@keyframe» для пульсации фона кнопки? ⇐ CSS

[Anonymous]

Я создаю кнопку Aqua (из Mac OS X), и одна из многих вещей, которые мне нужно исправить, - это пульсация кнопки, которую, кажется, очень трудно найти для реализации, которая действительно (вроде) работает
Однако я нашел (четвертьрабочее) исправление, которое «технически» пульсирует, но не решает новую проблему, заключающуюся в том, что весь фон пульсирует вместо размера фона. Он перемещает выбранный цвет (в частности, фон) @keyframe вверх и вниз. Поэтому я хочу, чтобы весь фон кнопки пульсировал, а не размер фона. Ключевой кадр фона для ясности здесь (сфокусируйтесь на верхнем).
Вот код CSS:
@keyframes color {
from {
background-size:50% 50%;
}
to {
background-size:100% 100%;
}
}
:root {
--confirm: linear-gradient(rgb(0, 36, 197),rgb(196, 201, 207));
--cancel: linear-gradient(#AAAAAA,#FFFFFF);
--altconfirm: linear-gradient(rgb(0, 100, 240),rgb(200, 200, 210))
}
button {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #ccc;
border-radius: 125px;
box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1);
cursor: pointer;
font-family: 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
font-size: 1.5rem;
margin: 1rem 1rem;
padding: .8rem 2rem;
position: relative;
transition: all ease .3s;
}
button:hover {
box-shadow: inset 0 13px 25px rgba(255,255,255,.7), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
transform: scale(1.001);
}
button::before {
background: linear-gradient(rgba(255,255,255,.8) 7%, rgba(255,255,255,0) 50%);
border-radius: 125px;
content:'';
height: 97.5%;
left: 5%;
position: absolute;
top: 1px;
transition: all ease .3s;
width: 90%;
}
button:active{
box-shadow: inset 0 13px 25px rgba(255, 255, 255, 0.2), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
transform: scale(1);
}
button::before:active{
box-shadow: inset 0 13px 25px rgba(255, 255, 255, 0.01), 0 3px 5px rgba(0,0,0,0.418), 0 10px 13px rgba(0, 0, 0, 0.418);
transform: scale(1);
}
button.confirm {
background: linear-gradient(rgb(0, 36, 197),rgb(196, 201, 207));
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease;
}
button.cancel {
background: var(--cancel);
border: 1.7px solid #AAA;
color: #000;
}

И HTML-код:





Document



Push Button

Push Button

EEE




Подробнее здесь: https://stackoverflow.com/questions/782 ... -backgroun