Animieren Linearen Farbverlauf mit CSS

Möchte ich meinen Farbverlauf mit mehreren Farben glatt, aber das problem ist, dass die animation nicht glatt ist, es ändert nur seine position bei jedem Schritt.

hier ist

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

Ist es möglich zu erreichen, ohne die Verwendung von jquery.

Mein jsfiddle link ist http://jsfiddle.net/bAUK6

  • bitte aktualisieren Sie die Geige link
  • Okay gerade aktualisiert den link. jsfiddle.net/bAUK6/1
  • Nun, ich denke, möchten Sie vielleicht, um zu versuchen, Ihre demo auf IE 11 (nicht sicher über IE 10), funktioniert es wie erwartet. Alle anderen Browser werden momentan noch nicht unterstützt hintergrund-animation, stattdessen können Sie versuchen zu animieren, die background-position aber natürlich nicht alle Effekte werden durch die Animation den ganzen hintergrund.
InformationsquelleAutor tehTerminator | 2014-05-03
  1. 10

    Versuchen Sie bitte diesen 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

    Leider, Sie kann nicht Animation zwischen Verläufe, wie dies in CSS.

    Gibt es viele workarounds natürlichdies ist die eleganteste, wie es nur mit CSS.

    InformationsquelleAutor Dave Lunny
Schreibe einen Kommentar