• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Animation

viking

Neues Mitglied
Hallo zusammen,

Eine kurze Frage: Ist es möglich mit CSS einen Code zu schreiben, der nach und nach ein Bild nach dem anderen auf einer Website sichtbar werden lässt, sprich der die "opacity" eines Bildes langsam nach oben regelt?

Bin gespannt auf eure Ideen!
 
Werbung:
Stichwort transition. Allerdings brauchst Du einen Auslöser hierfür der per CSS gesteuert wird. Evtl. ein hover auf body oder so.
 
Okay, danke für den Tipp. Aber wie linke ich den Auslöser zum Beispiel hover auf body zu dem eigentlichen Element, das sichtbar werden soll?
 
Werbung:
Ungetestet:

Code:
body .klasse { background-color: green;transition: background-color 1s; }
body:hover .klasse { background-color: red; }
 
Gibt es eine Möglichkeit die Elemente dauerhaft sichtbar zu machen? Sprich, auch wenn der cursor nicht mehr auf dem body steht, sollen die einzelnen Bilder immer noch sichtbar sein und nicht wieder verschwinden...
 
Werbung:
Erweiter den body auf das gesamte Browserfenster, dann sollte das von selbst klappen.
 
Ich meine, selbst wenn der cursor das Browserfenster verlässt. Gibt es dafür einen Befehl?
 
Befehle gibt es in CSS nicht. Was du willst, könntest Du nur mit JavaScript erreichen.
 
Werbung:
Sollte es nicht mit 'animation' funktionieren?
#id {
animation-name: farbWechsel;
animation-duration: 5s;
animation-iteration: infinite;
animation-direction:alternate;
animation-state: paused;}

#id:hover{
animation-play-state: running;}

@keyframes farbWechsel {
from {background-color: #000000;}
to {background-color:
{#ff0000;}

Neuer browser vorausgesetzt
 
Zuletzt bearbeitet:
Zurück
Oben