L'animation de Gradient Linéaire à l'aide de CSS

Je veux déplacer mon dégradé de plusieurs couleurs en douceur, mais le problème est que l'animation n'est pas lisse, il modifie sa position à chaque étape.

ici est

<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>

Est-il possible d'accomplir sans l'aide de jquery.

Mon jsfiddle lien est http://jsfiddle.net/bAUK6

  • veuillez mettre à jour le violon lien
  • Bon juste mis à jour le lien. jsfiddle.net/bAUK6/1
  • Eh bien, je pense que vous pouvez essayer de votre démo sur IE 11 (pas sûr de IE 10), elle fonctionne comme prévu. Tous les autres navigateurs ne sont pas compatibles actuellement animation en arrière-plan, au lieu de cela, vous pouvez essayer d'animer le background-position mais bien sûr, ce n'aurez pas tous les effets par l'animation de l'ensemble de fond.
InformationsquelleAutor tehTerminator | 2014-05-03
  1. 10

    S'il vous plaît essayez ce code:

    CSS:

    #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:

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

    InformationsquelleAutor RP The Designer
  2. 4

    Malheureusement, vous ne pouvez pas animer entre les gradients comme ça dans le CSS.

    Il ya beaucoup de solutions de contournement, bien sûr, celui-ci étant le plus élégant que c'est juste à l'aide de CSS.

    InformationsquelleAutor Dave Lunny