CSS-Transitions Problemchen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute cursor
alpha
animation
beispiel
bereich
code
cursor
display
effekt
element
filter
http
image
kleinen beispiel
lupe
maus
position
simples beispiel
teil
url
-
Hallo Com.,
Ich möchte einen Bereich abdunkeln und eine Lupe, mittig, anzeigen - wenn man mit der Maus darüber fährt.
Wie das funktioniert, da habe ich kein Problem damit es hinzukriegen:
.cover img { width: 145px; height: 200px; } .cover:hover .overlay-get-bigger { visibility: visible; display: inline; } .overlay-get-bigger { visibility: hidden; display: none; background-color: rgba(0,0,0,0.8); background-image: url("../images/lupe.png"); background-repeat: no-repeat; background-position: center center; width: 145px; height: 200px; position: absolute; cursor: nw-resize; }
Warum display und visibility? Als ich nur visibility genommen hatte, wurde es bei manchen Browsern beim laden eingeblendet und danach wieder ausgeblendet. Egal, meine Frage dreht sich ja um die Transitions.
Meine Frage ist also, wo setze ich die Transitions?
Ein simples Beispiel wäre einfach mal folgendes:
<!DOCTYPE html> <html lang="de"> <head> <title>Transition Example for lima-city</title> <style type="text/css"> .example_for_lima { width: 50px; height: 50px; background-color: blue; transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; -webkit-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; -moz-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; -o-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; } .example_for_lima:hover { width: 300px; height: 300px; background-color: red; transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; -webkit-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; -moz-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; -o-transition: width 1s ease-in-out, height 1s ease-in-out, background-color 1s ease-in-out; } </style> </head> <body> <div class="example_for_lima"></div> </body> </html>
Nur worauf lege ich in meinem Fall nun die Transitions? Ich kriegs gerade irgendwie nicht hin und möchte eigentlich jetzt nicht daran Stunden verschwenden
.
Gibt es eventuell jemanden, dem sofort einfällt wie ich es hinbekomme?
Wenn instant der abgedunkelte Bereich mit der zentrierten Lupe kommt, sieht es einfach nicht schön aus... .
MfG
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du müsstest die Tranisition theoretisch in diese class schreiben.
.overlay-get-bigger { visibility: hidden; display: none; background-color: rgba(0,0,0,0.8); background-image: url("../images/lupe.png"); background-repeat: no-repeat; background-position: center center; width: 145px; height: 200px; position: absolute; cursor: nw-resize; } -
transitions funktionieren nicht wenn ich se nur in einen Teil schreibe.
Es gibt ja immer ein ein- und ein ausblenden - siehste ja an meinem kleinen Beispiel.
Das nächste ist was muss ich animieren, um einen Effekt zu bekommen. Habe schon alle Werte versucht und nur den display + visibility Teil. Funktioniert einfach nicht. Vll. kennst sich wer damit gut aus und kann mir das beantworten? -
master4860 schrieb:
transitions funktionieren nicht wenn ich se nur in einen Teil schreibe.
Es gibt ja immer ein ein- und ein ausblenden - siehste ja an meinem kleinen Beispiel.
So ganz verstehe ich nicht, was du meinst. Ein transition-Effekt wird durch hover mit dem Mauszeiger ausgelöst. Wenn man den Mauszeiger weg bewegt, läuft der Effekt rückwärts.
master4860 schrieb:
Das nächste ist was muss ich animieren, um einen Effekt zu bekommen. Habe schon alle Werte versucht und nur den display + visibility Teil. Funktioniert einfach nicht. Vll. kennst sich wer damit gut aus und kann mir das beantworten?
Was für einen Effekt?
Auf jeden Fall: display lässt sich nicht mit transitions animieren. Die animierbaren Eigenschften werden hier
http://www.w3.org/TR/css3-transitions/#animatable-properties
aufgezählt.
Allerdings ist auch die Animation von visibility problematisch, denn es gibt keine Zwischenstufen. Um ein Element erscheinen zu lassen, ist es besser opacity zu animieren oder background-color mit rgba
Beitrag zuletzt geändert: 8.7.2014 0:51:16 von mein-wunschname -
Hm damit du versteht was ich meine, nimm doch einfach mein simples Beispiel. Wenn du die Transitions, beispielsweise, vom Ausgangselement wegnimmst - dann wird es animiert und wenn du mit der Maus vom Element heruntergehst, wird es instant/sofort wieder in der Ausgangsdarstellung angezeigt. Kein schöner Effekt für den User.
Zu dem Thema background-color, das ist wohl das beste zum animieren. Wobei opacity auch nicht schlecht wäre. Wenn ich heute Abend von der Arbeit komme teste ich das mal. Wenn ich dem oberen Element auch eine Opacity und ne background-color (in dem Falle halt von je 100%) gebe, ob ich es dann animiert bekomme.
Danke für die animierbare Elementliste.
Beitrag zuletzt geändert: 8.7.2014 8:46:58 von master4860 -
master4860 schrieb:
Hm damit du versteht was ich meine, nimm doch einfach mein simples Beispiel. Wenn du die Transitions, beispielsweise, vom Ausgangselement wegnimmst - dann wird es animiert und wenn du mit der Maus vom Element heruntergehst, wird es instant/sofort wieder in der Ausgangsdarstellung angezeigt. Kein schöner Effekt für den User.
...
Dieses Verhalten ist aber typisch für alles, was man mit :hover macht, auch wenn du einfach nur
a{ color:red; } a:hover{ color:blue }
verwendest, wird blue nur solange anzeigt, wie man den Link mit der Maus berührt, also immer eine Art Jojo-Effekt. Wenn man es anders machen will, dann muss man tricksen und noch ein klein wenig JavaScript einsetzen, damit man ein anderes Ereignis als :hover verwenden kann.
Mehrere Beispiele zum Thema CSS-Animation findest du auf http://skywalk-webdesign.de/css. Dort wird im Beitrag http://skywalk-webdesign.de/css/css3-animationen-teil-2 erklärt, wie man so eine transition-Animation auch durch andere Ereignisse als :hover auslösen kann. Vor allem das Beispiel 3 dort ist interessant. Es erklärt, wie beim Laden der Seite die transition in eine Richtung und beim Klick mit der Maus die Transition in die andere Richtung ausgelöst wird. Das kann man bestimmt auch nach anders anpassen.
Man findet auch noch eine Reihe anderer Lösungen im Netz. Möglichweise ist auch der AnythingZoomer für dich interessant.
Edit: Wie kann ich eigentlich hier Code so einfügen, dass er schön formatiert ist?
Beitrag zuletzt geändert: 8.7.2014 9:33:35 von mein-wunschname -
mit Klick auf Code kriegst du (code)(/code) <- nur halt im eckigen Klammern.
Dann entscheidest du welche Sprache, beispielsweise PHP:
(code=PHP)(/code)
Das = und die Sprache musst du selbst schreiben.
Und schau dir mal mein Beispiel aus dem ersten Beitrag an. Dann siehst du warum ich zwei mal eine Transition schreibe.
Nachdem ich jetzt mal annehme das du irgendwie keine Lust hast dir ne html Datei zu erstellen, hier mal n Link, dort habe ich dir mal meinen Beispielscode reinkopiert. Rechts siehst du das Ergebnis, links den Code (ist ja eigentlich selbst erklärend).
Fahre einfach mit mit der Maus über das Rechteck und schau was passiert wenn du die Maus wieder wegnimmst.
So anschließend entferne aus dem nicht hover Style den Transition-Effekt und du siehst genau wieso man den zwei mal definiert!
Eventuell ist von dem Online-Editor der blaue Hintergrund ungeeignet. Dann hier noch auf JSFiddle, entscheid selbst wo du es besser erkennen kannst. Aufjedenfall sollte dir der Teil mit den Transitions zwei mal definieren, danach, klar sein.
Beitrag zuletzt geändert: 8.7.2014 9:55:15 von master4860 -
Danke erst einmal für den Code Tipp.
Nein, ich war nicht zu faul mir eine Testdatei zu erstellen. Aber einfach mal zu deinem Beispiel.
Hier (dein Beispiel) http://cssdesk.com/eaV7z ist transition im Normalzustand und im :hover-Zustand drin, funktioniert.
Hier http://cssdesk.com/xxkyr ist transition nur im :hover-Zustand drin, ist nicht gut, denn beim Verlassen springt die Änderung
Hier http://cssdesk.com/LLzkG ist transition nur Normalzustand drin, funktioniert, und zwar genauso wie beim Beispiel mit transition in beiden Zuständen.
Abschließend noch ein Beispiel, bei dem ich die transition-Eigenschaften in beiden Zuständen drin habe: http://cssdesk.com/dPqX4. Die transition-duration ist aber unterschiedlich, so dass der Effekt bei Mausrein und Mausraus unterschiedlich schnell abläuft.
Beitrag zuletzt geändert: 8.7.2014 11:19:21 von mein-wunschname -
Ja stimmt, an den Teil habe ich nicht gedacht.
Das mit dem unterschiedlich langen Effekt, kannte ich bereits, sprich das man halt beim hover mehr Zeit setzt (bis der Effekt vollzogen ist) als beim normalen Zustand. - bzw. halt umgekehrt.
Ich bin nun wieder zu Hause und versuche ob ich es nun hinbekomme, wenn ich die background-color in die transition packe.
MfG
Dann füge ich mal die Lösung an:
.overlay-get-bigger:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */ filter: alpha(opacity=70); /* IE 5-7 */ -moz-opacity: 0.7; /* Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ opacity: 0.7; /* Good browsers */ } .overlay-get-bigger { background-color: #000000; background-image: url("../images/lupe.png"); background-repeat: no-repeat; background-position: center center; width: 145px; height: 200px; position: absolute; cursor: zoom-in; cursor: -moz-zoom-in; cursor: -o-zoom-in; cursor: -webkit-zoom-in; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ -moz-opacity: 0; /* Netscape */ -khtml-opacity: 0; /* Safari 1.x */ opacity: 0; /* Good browsers */ transition: opacity 0.5s ease-in-out; }
Beitrag zuletzt geändert: 8.7.2014 22:37:24 von master4860 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
