CSS Gradient nicht vom Ende Übergang

Mein CSS Gradient Animation zu beenden arbeitet außer alle Teile zur gleichen Zeit ändern sich nicht von einem Ende läuft wie dieses www.verily.com zu Ende, hier ist das, was ich versuchte,CSS Gradient nicht vom Ende Übergang

.animated { 
    -webkit-animation: animated1 20s infinite; 
    animation: animated1 20s infinite; 
} 



@-webkit-keyframes animated1 { 
    0%, 
    100% { 
     background-color: #2878ff 
    } 
    50% { 
     background-color: #ff1643 
    } 
} 

@keyframes animated1 { 
    0%, 
    100% { 
     background-color: #2878ff 
    } 
    50% { 
     background-color: #ff1643 
    } 
}

Quelle

2017-01-21 cssfan

dies ist kein Gefälle, nur Hintergrund-Farbe, Sie das Verhalten auffällt, ist normal. siehe https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient –

Nichts ist falsch mit diesem Code, es verblasst die Farbe schön, wie Sie in dieser Geige sehen können, https: // jsfiddle .net/y3kavc0w /, also wie meinst du es funktioniert nicht? – LGSon

Wie animiert man einen linearen Gradienten? – cssfan

Hier ist eine Möglichkeit, ein linear-gradient

body { 
 
    background: linear-gradient(270deg, #f51313, #fbf708); 
 
    background-size: 400% 400%; 
 
    -webkit-animation: anim 10s ease infinite; 
 
    animation: anim 10s ease infinite; 
 
} 
 
@-webkit-keyframes anim { 
 
    0%, 100% { 
 
    background-position: 0% 50% 
 
    } 
 
    50% { 
 
    background-position: 100% 50% 
 
    } 
 
} 
 
@keyframes anim { 
 
    0%, 100% { 
 
    background-position: 0% 50% 
 
    } 
 
    50% { 
 
    background-position: 100% 50% 
 
    } 
 
}

Quelle

2017-01-22 01:47:53 LGSon

Eigentlich ist die Art und Weise wahrlich erreicht ihre Wirkung zu animieren besteht darin, ein Bild zu animieren.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body{ 
 
    position: relative; 
 
    overflow: hidden; 
 
    min-height: 100vh; 
 
} 
 

 
.verily-hero-image-gradient{ 
 
    background-image: url(//verily.com/img/gradient-loop.png); 
 
    background-size: 100% 100%; 
 
    animation: hero-gradient-loop 20s infinite; 
 
    display: block; 
 
    height: 1000%; 
 
    position: fixed; 
 
    left: 0; 
 
    opacity: 1; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 

 
@keyframes hero-gradient-loop{ 
 
    0%{ 
 
    -webkit-transform:translate3d(0,0,0); 
 
    transform:translate3d(0,0,0); 
 
    } 
 
    100%{ 
 
    -webkit-transform:translate3d(0,-50%,0); 
 
    transform:translate3d(0,-50%,0); 
 
    } 
 
}

<div class="verily-hero-image-gradient"></div>

Quelle

2017-01-22 01:53:38

CSS Gradient nicht vom Ende Übergang

Antwort

Verwandte Themen