nicht angemeldet
CSS: Strukturelle Pseudoklasen :target
Matthias Scharwies
marctrixich habe versucht, das Wikibeispiel zu ändern
...
<style>
#u:target { animation: drehu 1s 1 linear forwards;
}
#v:target { animation: drehv 1s 1 linear forwards;
}
@keyframes drehu {from {transform: rotateZ(180deg);}
to {transform:rotateZ(180deg);}
}
@keyframes drehv {from {transform: rotateZ(180deg);}
to {transform:rotateZ(180deg);}
}
</style>
...
<h1>CSS-Beispiel: Pseudoklasse target</h1>
<main>
<h2 id="v">Die Pseudoklasse target</h2>
<h2 id="u">Strukturelle Pseudoklassen</h2>
<p>Linkliste</p>
<ul>
<li><a href="#v">Strukturelle Pseudoklassen</a>
</li>
<li><a href="#u">Pseudoklasse target</a>
</li>
</ul>
</main>
gibt es denn keine Möglichkeit, die eine Transformation beizubehalten wenn die andere durchgeführt wird?
-
Servus!
ich habe versucht, das Wikibeispiel zu ändern
ok, soweit gut.
... <style> #u:target { animation: drehu 1s 1 linear forwards; } #v:target { animation: drehv 1s 1 linear forwards; }gibt es denn keine Möglichkeit, die eine Transformation beizubehalten wenn die andere durchgeführt wird?
Nein, weil nur jeweils ein Element der Webseite das :target (durch Klick auf den Link) erhalten kann.)
Zitat Wiki: "Die CSS-Anweisungen gelten nur dann, wenn der Verweis gerade aktiviert wurde."
Du hast bei 1s für animation-delay die Einheit s vergessen!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Danke, ist mir später auch klar geworden; da kommt man also um js nicht herum; aber
wenn inanimName 1s infinitedas infinite die Anzahl ist
dann ist doch inanimName 1s 1die 2te 1 auch die Anzahlangabe und nicht die Delayangabe ? Oder wo, meinst Du, hätte ich eine Delayangabe ohne 's' gemacht?-
Servus!
Danke, ist mir später auch klar geworden; da kommt man also um js nicht herum; aber
wenn inanimName 1s infinitedas infinite die Anzahl ist
dann ist doch inanimName 1s 1die 2te 1 auch die Anzahlangabe und nicht die Delayangabe ? Oder wo, meinst Du, hätte ich eine Delayangabe ohne 's' gemacht?Du hast Recht, an animation-iteration-count habe ich nicht gedacht. Bei einer einmaligen Animation würde ich es weglassen und den Standardwert von 1 nehmen.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
Hej mathefritz,
Danke, ist mir später auch klar geworden; da kommt man also um js nicht herum;
Verstehe ich nicht - warum willst du, dass mehrere Animationen laufen? Du willst doch zeigen, welches Element aktuell angesprungen wurde, wenn du
:targetnutzt?!?Marc
-
Servus!
Hej mathefritz,
Danke, ist mir später auch klar geworden; da kommt man also um js nicht herum;
Verstehe ich nicht - warum willst du, dass mehrere Animationen laufen? Du willst doch zeigen, welches Element aktuell angesprungen wurde, wenn du
:targetnutzt?!?Imho geht's ihm eher um transform und er sucht einen anderen Trigger für die Animation.
Marc
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Hej Matthias,
Danke, ist mir später auch klar geworden; da kommt man also um js nicht herum;
Verstehe ich nicht - warum willst du, dass mehrere Animationen laufen? Du willst doch zeigen, welches Element aktuell angesprungen wurde, wenn du
:targetnutzt?!?Imho geht's ihm eher um transform und er sucht einen anderen Trigger für die Animation.
Ich kann mir derzeit nicht so recht vorstellen, was erreicht werden soll. Wenn man einen Schalter benötigt zum Anstellen einer Animation wie wäre es mit einer Checkbox?
Wenn das eh nur grafischer „Firlefanz“ wäre, würde ich die Boxen vor Screenreadern verstecken und gut ist.
Marc
-
ja, marctrix, wie schon Mathias richtig vermutete ging es mir um jeweils einmaligge und dann bleibende Transformationen .
-
Hej mathefritz,
ja, marctrix, wie schon Mathias richtig vermutete ging es mir um jeweils einmaligge und dann bleibende Transformationen .
Die sollen also einmal durchlaufen und dann im Endzustand bleiben?
Habe ich noch gar nicht probiert, ob so etwas geht. Vermutlich schon mittels Checkbox-Hack o.ä.
Aber dann ist JS ggfs tatsächlich das sinnvollere Werkzeug.
Oder animiertes SVG!
Marc
-
-
-
-
-
-