Анимация линейного градиента с использованием CSS

Я хочу, чтобы мой градиент с несколькими цветами плавно, но проблема в том, что анимация негладкая, она просто меняет свое положение на каждом шагу.Анимация линейного градиента с использованием CSS

здесь

<style> 
.animated { 
    width:300px; 
    height:300px; 
    border:1px solid black; 
    animation:gra 5s infinite; 
    animation-direction:reverse; 
    -webkit-animation:gra 5s infinite; 
    -webkit-animation-direction:reverse; 

    animation-timing-function:linear; 
    -webkit-animation-timing-function:linear; 
} 
@keyframes gra { 
    0% { 
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57)); 
     background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); 
     background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); 
    } 
    50% { 
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57)); 
     background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); 
     background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); 
    } 
    100% { 
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57)); 
     background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); 
     background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); 
    } 
} 
</style> 
<div class="animated"> 
    <h1>Hello</h1> 

</div>

Можно ли выполнить без использования JQuery.

Мой jsfiddle ссылка http://jsfiddle.net/bAUK6

источник

2014-05-03 tehTerminator

пожалуйста, обновите скрипку ссылку –

Okay просто обновил ссылку. http://jsfiddle.net/bAUK6/1/ – tehTerminator

Ну, я думаю, вы можете попробовать свою демоверсию в IE 11 (не уверен в IE 10), она работает так, как вы ожидали. Все остальные браузеры в настоящее время не поддерживают фоновой анимации, вместо этого вы можете попробовать анимацию «background-position» **, но **, конечно, это не будет иметь всех эффектов, анимируя весь фон. –

К сожалению, вы не можете анимировать между градиентами, как это в CSS.

Существует много обходных путей, конечно, this one being the most elegant, так как это просто использование CSS.

источник

2015-04-13 15:37:08

Пожалуйста, попробуйте этот код:

#gradient 
 
{ 
 
    height:300px; 
 
    width:300px; 
 
    border:1px solid black; 
 
    font-size:30px; 
 
    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); 
 
    background-size: 200% 200%; 
 

 
    -webkit-animation: Animation 5s ease infinite; 
 
    -moz-animation: Animation 5s ease infinite; 
 
    animation: Animation 5s ease infinite; 
 
} 
 

 
@-webkit-keyframes Animation { 
 
    0%{background-position:10% 0%} 
 
    50%{background-position:91% 100%} 
 
    100%{background-position:10% 0%} 
 
} 
 
@-moz-keyframes Animation { 
 
    0%{background-position:10% 0%} 
 
    50%{background-position:91% 100%} 
 
    100%{background-position:10% 0%} 
 
} 
 
@keyframes Animation { 
 
    0%{background-position:10% 0%} 
 
    50%{background-position:91% 100%} 
 
    100%{background-position:10% 0%} 
 
}

<html> 
 
<div id="gradient"> 
 
    Hello 
 
</div> 
 
</html>

источник

2016-07-03 18:51:33

Анимация линейного градиента с использованием CSS

ответ

Смежные вопросы