Animieren eines linearen Farbverlaufs mit CSS

Lesezeit: 5 Minuten

Animieren eines linearen Farbverlaufs mit CSS
derTerminator

Ich möchte meinen Farbverlauf mit mehreren Farben reibungslos verschieben, aber das Problem ist, dass die Animation nicht glatt ist, sondern bei jedem Schritt nur ihre Position ändert.

<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, dies ohne die Verwendung von jquery zu erreichen?

Mein jsfiddle-Link ist https://jsfiddle.net/bAUK6

  • Nun, ich denke, Sie möchten Ihre Demo vielleicht auf IE 11 ausprobieren (bei IE 10 bin ich mir nicht sicher), es funktioniert wie erwartet. Alle anderen Browser unterstützen derzeit keine Hintergrundanimation, stattdessen können Sie versuchen, die zu animieren background-position aber Natürlich hat dies nicht alle Effekte, wenn der gesamte Hintergrund animiert wird.

    – König König

    3. Mai 14 um 6:33 Uhr


1642542009 542 Animieren eines linearen Farbverlaufs mit CSS
RP Der Designer

Bitte versuchen Sie diesen Code:

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

  • Macht den Job perfekt.

    – Chintan Joshi

    9. September 21 um 8:51 Uhr

Animieren eines linearen Farbverlaufs mit CSS
Benutzer-Rebo

Dynamische Implementierung von Daves Antwort:

:root{
    --overlay-color-1: #ff0000;
    --overlay-color-2: #0000ff;
    --anim-duration: 2s;
}

#gradient {
    opacity: 0.8;
    background: none;
}

#gradient:after,
#gradient:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

#gradient:before {
    background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}

#gradient:after {
    background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
    animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}

@keyframes OpacityAnim {
    0%{opacity: 1.0}
    100%{opacity: 0.0}
}
<div id="gradient"></div>

1642542009 747 Animieren eines linearen Farbverlaufs mit CSS
Temani Afif

Die Verwendung von CSS-Variablen ist jetzt eine triviale Aufgabe.

Hier ist ein einfaches Beispiel (bewegen Sie den Mauszeiger, um das Ergebnis zu sehen)

@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  /*  needed for firefox to have a valid output */
  --a:80deg;
  --l:10%;
  --c:red;
  /**/
  cursor:pointer;
  height:200px;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
  --a:360deg;
  --l:40%;
  --c:green;
}
<div class="box"></div>

Weitere Details hier: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

  • Zu Ihrer Information, Verlaufsübergänge funktionieren noch nicht in Firefox oder Safari, was bedeutet, dass sie auch nicht auf iPhones und iPads funktionieren.

    – Marquizzo

    18. Juni 21 um 19:04 Uhr


1642542009 733 Animieren eines linearen Farbverlaufs mit CSS
Dmitri Babich

Hier ist ein anderer Weg. Das Folgende hat den statischen Gradienten, der alle Phasen der Animation enthält, die dann in das äußere Element verschoben wird. Dies ermöglicht eine reibungslose Animation (wie das Thema andeutet), da die einzige Animation hier die Elementposition ist.

Bitte beachten Sie, dass aus Performancegründen das Gradientenelement unverändert gelassen wird. Obwohl die Frage war, den Farbverlauf zu animieren, bewirkt das Verschieben des Hintergrunds fast dasselbe.

.animated {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
}
.innerGradient {
    z-index: -1;
    width: 300%;
    height: 300%;
    position: absolute;
    animation: gra 5s infinite;
    -webkit-animation: gra 5s infinite;
    background: linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
    background: -webkit-linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
}
@keyframes gra {
    0% { left: -200%; top: -200%; }
    50% { left: 0%; top: 0%; }
    100% { left: -200%; top: -200%; }
}
<div class="animated">
    <h1>Hello</h1>
    <div class="innerGradient"></div>
</div>

Wie wäre es damit:

Stellen Sie den Körperrand und die Polsterung auf 0 ein. Stellen Sie eine HTML-Regel auf 100 % Höhe ein (höher als 100 % kann erforderlich sein).

Stellen Sie den Körper auf den Endzustand für den Farbverlauf ein.

Erstellen Sie ein leeres div mit einem Hintergrund, der den Startzustand für den Farbverlauf darstellt. Geben Sie dem leeren div 100 % Höhe.

Geben Sie sowohl dem Körper als auch dem leeren div einen Hintergrundanhang: fixed;

Erstellen Sie einen Wrapper für Ihren Textinhalt.

Setzen Sie das leere div auf position: fixed; Setzen Sie den Wrapper auf position: relative; Geben Sie beiden einen Z-Index, wobei der Wrapper höher ist.

Erstellen Sie eine Animation, die die Deckkraft des leeren Div über die gewünschte Zeit von 1 auf 0 ändert. Animationsfüllmodus hinzufügen: vorwärts; an die div-Regel, damit die Animation dort bleibt, wo sie endet.

Es ist nicht so sexy wie eine echte animierte Farbverlaufsverschiebung, aber es ist so einfach, wie Sie es nur mit CSS und Keyframes bekommen können, denke ich.

.

538980cookie-checkAnimieren eines linearen Farbverlaufs mit CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy