CSS Hintergrund (Übergang) Gradient funktioniert nicht

Question

Der CSS-Übergang in meinem a-Tag verblassen und nicht, es ist einfach, als gäbe es überhaupt keinen Übergang! Ich habe auch versucht, transition: background 300ms ease-in-out; zu verwenden, aber immer noch kein Glück

CSS:

.FeatureRow a{
    padding: 10px;
    display: block;
    width: 260px;
    height: auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0px 4px 8px #f5f5f5;
    -moz-box-shadow: 0px 4px 8px #f5f5f5;
    box-shadow: 0px 4px 8px #f5f5f5;
    Hintergrundbild: -moz-linear-gradient(top, #fbfbfb, #ffffff);
    Hintergrundbild: -webkit-gradient(linear, 0 0, 0 100%, von(#fbfbfb), bis(#ffffff));
    Hintergrundbild: -webkit-linear-gradient(top, #fbfbfb, #ffffff);
    Hintergrundbild: -o-linear-gradient(top, #fbfbfb, #ffffff);
    Hintergrundbild: Verlauf von oben nach unten, #fbfbfb, #ffffff);
    Hintergrundwiederholung: repeat-x;
    Übergang: alle 300ms ease-in-out;
    -webkit-Übergang: alle 300ms ease-in-out;
    -moz-Übergang: alle 300ms ease-in-out;
    -ms-Übergang: alle 300ms ease-in-out;
    -o-Übergang: alle 300ms ease-in-out;
}
.FeatureRow a:hover{
    Hintergrundbild: -moz-linear-gradient(top, #C00, #C0F);
    Hintergrundbild: -webkit-gradient(linear, 0 0, 0 100%, von(#C00), bis(#C0F));
    Hintergrundbild: -webkit-linear-gradient(top, #C00, #C0F);
    Hintergrundbild: -o-linear-gradient(top, #C00, #C0F);
    Hintergrundbild: Verlauf von oben nach unten, #C00, #C0F);
}

Answer 1

Wie Adrift sagt, wird dies nicht unterstützt; du musst es simulieren.

Dies ist der CSS

.FeatureRow {
    padding: 10px;
    display: block;
    position: relative;
    width: 260px;
    height: 70px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-image: linear-gradient(0deg,weiß,grau);
}

.FeatureRow:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg,rot,magenta);
    opacity: 0;
    transition: all 3s ease-in-out;
}

.FeatureRow:hover:after {
    opacity: 1;
}

Wir überlagern dein div mit einem Pseudo-Element. Jedes hat einen Farbverlauf. Das Pseudo-Element hat eine Opazität von 0; wenn du darüber schwebst, änderst du die Opazität auf 1; und diese Eigenschaft kann überblendet werden.

demo

Answer 2

Wie in anderen Antworten bereits erwähnt wurde, ist es nicht möglich, einen Verlauf zu animieren. Es ist jedoch möglich, die Hintergrundfarbe zu animieren. Wenn Sie dies wissen, können Sie einen transparenten Verlauf über einer Hintergrundfarbe platzieren, was es Ihnen ermöglicht, eine der Farben in Ihrem Verlauf zu animieren.

Um dies zu tun, wählen Sie die Farbe aus, die Sie animieren möchten, setzen Sie sie als Hintergrundfarbe und setzen Sie anstelle davon rgba(0,0,0,0) (transparent).

Dann müssen Sie nur noch bei :hover oder mit Javascript die Hintergrundfarbe auf den gewünschten Wert ändern

Dies funktioniert nur, um eine Farbe Ihres Verlaufs zu animieren. Aber ich denke, es ist immer noch eine anständige Option, um einen Verlauf zu animieren

.squareTile {
    background: radial-gradient(#203244eb, rgba(0,0,0,0), #203244eb);
    background-color: #3596ff;
    border-radius: 10px;
  width: 100px;
    height: 100px;
    border: 1px solid black;
    cursor: pointer;
    transition: 1s;
}

.squareTile:hover {
    background-color: #77c577;
}

Answer 3

Die Verwendung von Farbverläufen für Animationen (oder Übergänge) wird von keinem Browser unterstützt im Moment. Werfen Sie einen Blick auf diese Liste im Modul Übergänge für eine Liste aller aktuellen animierbaren Eigenschaften

Answer 4

Das Animieren eines Hintergrundverlaufs ist möglich, wie bereits erwähnt, und es gibt derzeit ein ziemlich gutes Tool, mit dem Sie mit dem Feature spielen können:

https://www.gradient-animator.com/

Beispiel Ausgabe:

.css-selector {
    background: linear-gradient(270deg, #8ccebd, #146e57);
    background-size: 400% 400%;

    animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}