Frage zu webkit-animation

#1 PaulF

Junior

Gruppe: Mitglieder
Beiträge: 9
Beigetreten: 15. Juli 15
Reputation: 0

geschrieben 01. April 2016 - 08:15

Der bewegte Code der funktionieren sollte

background: linear-gradient(270deg, #aecaf6, #f6d27f, #78f475);
background-size: 600% 600%;

-webkit-animation: background 30s ease infinite;
-moz-animation: background 30s ease infinite;
animation: background 30s ease infinite;

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

Auf https://www.gradient-animator.com/ funktioniert er perfekt.
Nur bei mir nicht. Es wird nur eine Farbe angezeigt (grün) die sich eben nicht bewegt.
Was mache ich falsch? Habe nur am Anfang einen body { hinzugefügt und einen <body> tag im html code.

Nach oben
Nach oben of the page up there ^

#2 slurp

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.403
Beigetreten: 25. September 08
Reputation: 133
Geschlecht:Männlich

geschrieben 01. April 2016 - 08:37

Ist so natürlich schwer zu erraten, wo der Fehler liegt. Besser wärs, wenn du deinen Code, der buggt, hier mal komplett posten würdest. Wie du sagtest, der obere Code (also der von gradient-animator kopierte) funktioniert ja.

Nach oben
Nach oben of the page up there ^

#3 PaulF

Junior

Gruppe: Mitglieder
Beiträge: 9
Beigetreten: 15. Juli 15
Reputation: 0

geschrieben 01. April 2016 - 08:46

<link type="text/css" rel="stylesheet" href="style.css" />
<body></body>

und

body {
background: linear-gradient(270deg, #246655, #e98b29, #acb6f6);
background-size: 600% 600%;
-webkit-animation: background 30s ease infinite;
-moz-animation: background 30s ease infinite;
-o-animation: background 30s ease infinite;
animation: background 30s ease infinite;
@-webkit-keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

ich bin sicher das ich nur irgendwas übersehe, nur ich kommehalt nicht drauf.

Nach oben
Nach oben of the page up there ^

#4 aeris

WinFuturianer

Gruppe: aktive Mitglieder
Beiträge: 129
Beigetreten: 06. September 08
Reputation: 12
Geschlecht:unbekannt

geschrieben 01. April 2016 - 17:13

Animationen müssen ausserhalb von declaration Blöcken definiert werden.
Dir fehlt daher eine geschwungene Klammer nach Zeile 7.

body {
   ...
} /* <--  */

@-webkit-keyframes background {
...

Nach oben
Nach oben of the page up there ^

#5 PaulF

Junior

Gruppe: Mitglieder
Beiträge: 9
Beigetreten: 15. Juli 15
Reputation: 0

geschrieben 05. April 2016 - 11:34

Ahaaaaaa! Danke für den Tipp! Funktioniert jetzt alles bestens und ich bin ein Stück schlauer!

Nach oben
Nach oben of the page up there ^

#6 slurp

Freak

Gruppe: aktive Mitglieder
Beiträge: 1.403
Beigetreten: 25. September 08
Reputation: 133
Geschlecht:Männlich

geschrieben 05. April 2016 - 13:02

ich habs auch übersehen /o\
Aber gut, dass es nu funktioniert.

Nach oben
Nach oben of the page up there ^

Thema verteilen:

Seite 1 von 1

WinFuture-Forum.de: Frage zu webkit-animation - WinFuture-Forum.de