Я хочу добиться эффекта, чем когда пользователь навешивается над div, это цвет фона превращается в градиент, который плавно переключается из одного угла в другой, повторно, используя чисто CSS.Как оживить градиентный фон плавно
Эффект, который я хочу достичь, пытаясь выразить его словами, заключается в том, что более темная часть фона (с непрозрачностью 0,9) скользит от одного угла к другому несколько раз, пока курсор остается выше элемент.
На самом деле происходит то, что фон перескакивает из одного состояния в другое. Где я иду не так? Как я могу заставить это быть анимированным, гладким эффектом?
Вот мой код:
#test {
width: 200px;
height: 200px;
background-color: rgba(215, 54, 92, 0.7);
}
@keyframes test_hover {
from {
background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5)); /* Standard syntax (must be last) */
}
to {
background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9)); /* Standard syntax (must be last) */
}
}
#test:hover {
cursor: pointer;
animation-name: test_hover;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
}<div id="test"></div>Вот JSFiddle
Этот вопрос был ссылаться дубликатом из here, но я думаю, что это не так. Для начала в этом вопросе нет кода, который затрудняет его понимание. Кроме того, в ответ на этот вопрос он использует переход, но мне не нужен переход, потому что он применяется только один раз, я хочу, чтобы моя анимация постоянно повторялась, когда пользователь зависал div.
То же самое действительно, анимация или переход ... это не transitionable/анимируемым. Думаю, вам нужно что-то делать с позиции bg. –
@ pablito.aven Он помог и объяснил. Фоновые градиенты не являются переходными. Вы можете использовать изображение и играть с фоновой позицией, но это все. – CaldwellYSR
Вы можете достичь этого с помощью javascript http://stackoverflow.com/questions/33892656/how-change-css-using-variables-to-make-an-animation –