CSS Animation Rohrleitung

[jockele]

Guten Morgen,

ich visualisiere gerade meine WP, dafür würde ich gerne je nach Stellung der 3-Wege-Hähne die "aktiven" Rohrleitungen animiert darstellen.
Ich stelle mir dafür einen animierten Wechsel zwischen 2 Farben vor der durch die Leitung pulst, so dass die Fließrichtung erkennbar wird.

Hat jemand eine Idee wie man so was per CSS umsetzen kann?

Viele Grüße Jochen

[uzi10]

Wäre interessant

[panzaeron]

Das müsste sich mit CSS Keyframe-Animationen realisieren lassen:

• https://www.mediaevent.de/css/animation.html
• https://blog.kulturbanause.de/2015/1...e-animationen/

[trax]

... z.B. so:

Animation.gif

0% {
background-image:
linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
background-size: 15px 1px;
background-position: 0%;
background-repeat: repeat;}
100% {
background-image:
linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
background-size: 15px 1px;
background-position: 50%;
background-repeat: repeat;}

[neci]

Will bei mir nicht laufen, da blinken nur Linien. Wie hast du das konfiguriert?

[fisch3009]

Da es ein Background ist, muss das Universalelement auch eine entsprechende Größe haben, dass man den Background sehen kann, also nur Linienbreite reicht nicht.

[jockele]

bei mir siehts jetzt so aus :

chrome-capture.gif
Hintergrundfarbe z.B.:

repeating-linear-gradient(90deg, red 10px, #d8a0a6 20px, red 40px)

Animation:

0% {background-position: 0%}
0% {background-size: 400%}
100% {background-position: 100%}
100% {background-size: 400%}

[thn80]

jockele do you have a completely working HTML example?

Thanks,

Thomas

[jockele]

this is just done with a colour and a css-animation inside edomi. For further information check https://www.mediaevent.de/css/animation.html , with these information I was able to create this animation. I'm not really an expert in html/css

[vento66]

Bis jetzt konntet ihr beide doch deutsch schreiben und lesen? Was ist denn passiert?

Все будет хорошо

[thn80]

vento66 mist....das passiert wenn man zu viel auf englischen Seiten unterwegs ist

SORRY

[oefchen]

bei mir siehts jetzt so aus :

Coole Sache das...danke jockele
Den Hintergrund in gestreift funzt noch: Farbe angelegt und den liniar-gradient in die Definition.

Hintergrundfarbe z.B.:

repeating-linear-gradient(90deg, red 10px, #d8a0a6 20px, red 40px)

Animation:

0% {background-position: 0%}
0% {background-size: 400%}
100% {background-position: 100%}
100% {background-size: 400%}

Nur die Bewegung krieg ich nicht hin. Den Code müsstest doch in die "eigenen CSS-Eigenschaften" des Universalelementes eintragen....oder ?

[jockele]

nein, Du musst eine neue Animation erzeugen, den Code da rein und dann entsprechend im Universalelement auswählen. Zeit bei mir 10s und Dauer unendlich.
Allerdings ruckelt es nach Ablauf der 10s dann mal ganz kurz, weiß nicht ob man das wegbekommt, stört mich aber auch nicht weiter

[jockele]

Was ist denn passiert?

Englische Frage, englische Antwort :-). Hab nicht näher geschaut wer gefragt hat, also auch von mir ein sorry

[oefchen]

nein, Du musst eine neue Animation erzeugen, den Code da rein und dann entsprechend im Universalelement auswählen. Zeit bei mir 10s und Dauer unendlich.
Allerdings ruckelt es nach Ablauf der 10s dann mal ganz kurz, weiß nicht ob man das wegbekommt, stört mich aber auch nicht weiter

Und wieder was gelernt...bis dahin hatte ich es noch nicht geschafft