Ich konnte die Vergrößerung in Firefox erreichen, indem ich -moz-transition: scale(1.4); verwendet habe, aber der Animations-Teil funktioniert nicht. Hat Firefox ein Äquivalent zu ease-in-out?
Zum jetzigen Zeitpunkt unterstützt die aktuelle stabile Version von Firefox keine Übergänge, nein.
Aber die Nachtschicht-Build von Firefox (3.7) soll Übergänge mit dem Herstellerpräfix „-moz-transition:“ unterstützen. Da 3.7 noch keine stabile Version ist, müssen wir vorerst warten. =)
Die CSS3-Spezifikation für Übergänge könnte tatsächlich fertiggestellt sein, bis Firefox 3.7 veröffentlicht wird, sodass es möglicherweise nicht einmal notwendig ist, das herstellerspezifische Präfix zu verwenden.
Ich versuche, dasselbe für eine Navigations-UL zu verwenden, aber das Problem ist, wenn ich mit der Maus darüber fahre und der aktuelle Link skaliert wird, überdeckt er die anderen Links und kehrt nicht reibungslos zum Anfang zurück; er springt. Ich habe keine Ahnung, wie die anderen Nav-Elemente vom aktuell skalierten Nav-Link bewegt oder verdrängt werden sollen, oder wie man das ruckelige Zurückspringen des Links behebt, wenn ich die Maus davon weg bewege. Ich bin ganz neu im Webdesign (6 Monate), daher ist mein Wissen im Moment wie Schweizer Käse. Ich würde mich über Hilfe bei diesem Problem freuen, da ich derzeit etwas verloren bin.
Hier ist mein CSS für ul. Ich bin sicher, dass mir einige offensichtliche Dinge fehlen, daher wird jede Hilfe sehr geschätzt!
#intro-container ul { font-size: 20px; float: right; margin: 20px 0; padding: 80px 0 0 0; text-align: right; list-style: none;
}
#intro-container ul li {
}
#intro-container ul li a { display: block; font-size:45px; padding: 5px; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; transition: transform 0.5s ease;
}
#intro-container ul li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); -webkit-transform-origin: top right; -moz-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right;
}
Nochmals vielen Dank im Voraus für jede Hilfe, die jemand leisten möchte. Diese Dinge sind für Anfänger verwirrend!
Ich versuche, kleine Icons mit dieser Methode zu skalieren. Es funktioniert für moz, firefox, chrome, safari… aber konnte es nicht für ie7-8 zum Laufen bringen. Ich glaube, es gibt keine direkte Unterstützung dafür. Haben Sie JavaScript oder Ähnliches, das eine ähnliche Aufgabe erfüllt?
Hallo, schöner Effekt, ich benutze ihn jetzt als Haupteffekt beim Überfahren einer Website und habe ihn auch schon früher benutzt, aber ich kann nicht begreifen, wie ich ein Problem lösen kann. Während der Übergang läuft, beginnen andere Elemente in der Ansicht, sich geringfügig wahrnehmbar, aber sehr störend unerwünscht zu bewegen. Manchmal sind es andere Bilder, manchmal wird Text leicht fetter, und IMMER hat das Bild, das den Übergang ausführt, einen anfänglichen und endgültigen verschwommenen Moment, sehr kurz, aber sehr schrecklich. Was verpasse ich hier?
Hallo, ich habe genau dasselbe Problem, dass sich andere Elemente auf der Seite leicht bewegen und zittern oder was auch immer. Auch das Problem des verschwommenen Einblendens beim Zoomen. Haben Sie jemals eine Lösung für dieses Problem gefunden? Danke.
-webkit-transition: .6s ease-in-out fade; dieser Code funktioniert nicht in Google Chrome. In Mozilla funktioniert er einwandfrei. Bitte helfen Sie mir.
Hey, es scheint, dass die Reihenfolge der Parameter falsch ist, transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; versuchen Sie -webkit-transition: opacity .6s ease-in-out Und meines Wissens ist 'fade' keine CSS-Eigenschaft, daher kann kein CSS-Übergang darauf ausgeführt werden. Deshalb habe ich Ihre Regel von 'fade' zu opacity geändert. und es gibt Tausende von Artikeln über CSS-Übergänge da draußen, aber der folgende ist einer der besten :)
Nein, weder transform noch transition funktionieren in IE8. Schauen Sie sich http://caniuse.com/ an – es ist eine großartige Ressource, um solche Dinge nachzuschlagen.
Ich verwende diese Technik, um Icons in Links beim Überfahren zu vergrößern. Es funktioniert, aber die Icons springen nach Abschluss des Übergangs wieder auf ihre normale Größe zurück, anstatt so lange größer zu bleiben, wie man mit der Maus darüber fährt. Sie können es auf meiner Website hier sehen
Weiß jemand, ob es eine Möglichkeit gibt, dies zu beheben, damit die Icons in der größeren, übergeblendeten Größe verbleiben, bis die Maus darüber hinausfährt?
Hallo, ja, es scheint seltsam, dass es beim Überfahren nur für eine begrenzte Zeit angezeigt wird. Versuchen Sie, den Link auf display: block oder inline-block zu ändern, das scheint es zu beheben.
Ich habe noch nie richtig codiert und versuche gerade, eine Website für kundenspezifische T-Shirt-Designs zu erstellen. Ich wollte wissen, wie der vollständige Code lautet und wie man ihn auf eine Bildergalerie anwendet. Vielen Dank für die Hilfe sehr geschätzt Sue
Wenn das Element, das Sie skalieren möchten, ein img mit 100% Breite ist, kann der hier bereitgestellte Code in Safari problematisch sein. Die Skalierungsanimation wird beim Laden der Seite sowie beim Überfahren ausgeführt. Um dies zu beheben, ändern Sie "all" in der Übergangseigenschaft zu "transform". So
Beim Überfahren mit der Maus wird das Bild größer als beim Entfernen der Maus, dann ist es wieder in derselben Position. In diesem Bild ist der Absatz usw. aber nur das Bild wird größer. Wir können den Absatz nicht ändern….. Wie machen Sie das…. mit CSS-Eigenschaften….? Antwort….. sagen Sie es mir…..
Ich möchte mein Balkendiagramm erstellen, das sich in der Höhe vergrößern sollte, wenn die Maus darüber fährt, also danke für dieses Tutorial, es ist sehr hilfreich für mich.
Ich konnte die Vergrößerung in Firefox erreichen, indem ich -moz-transition: scale(1.4); verwendet habe, aber der Animations-Teil funktioniert nicht. Hat Firefox ein Äquivalent zu ease-in-out?
Zum jetzigen Zeitpunkt unterstützt die aktuelle stabile Version von Firefox keine Übergänge, nein.
Aber die Nachtschicht-Build von Firefox (3.7) soll Übergänge mit dem Herstellerpräfix „-moz-transition:“ unterstützen. Da 3.7 noch keine stabile Version ist, müssen wir vorerst warten. =)
Die CSS3-Spezifikation für Übergänge könnte tatsächlich fertiggestellt sein, bis Firefox 3.7 veröffentlicht wird, sodass es möglicherweise nicht einmal notwendig ist, das herstellerspezifische Präfix zu verwenden.
Es ist wirklich cool… Danke
Ja, es funktioniert wirklich.
einfacher Code
und einfacher Zoom.
vielen Dank
Danke dir, mein Heiliger
Ich habe eine Frage zu dieser Technik.
Ich versuche, dasselbe für eine Navigations-UL zu verwenden, aber das Problem ist, wenn ich mit der Maus darüber fahre und der aktuelle Link skaliert wird, überdeckt er die anderen Links und kehrt nicht reibungslos zum Anfang zurück; er springt. Ich habe keine Ahnung, wie die anderen Nav-Elemente vom aktuell skalierten Nav-Link bewegt oder verdrängt werden sollen, oder wie man das ruckelige Zurückspringen des Links behebt, wenn ich die Maus davon weg bewege. Ich bin ganz neu im Webdesign (6 Monate), daher ist mein Wissen im Moment wie Schweizer Käse. Ich würde mich über Hilfe bei diesem Problem freuen, da ich derzeit etwas verloren bin.
Hier ist mein CSS für ul. Ich bin sicher, dass mir einige offensichtliche Dinge fehlen, daher wird jede Hilfe sehr geschätzt!
#intro-container ul {
font-size: 20px;
float: right;
margin: 20px 0;
padding: 80px 0 0 0;
text-align: right;
list-style: none;
}
#intro-container ul li {
}
#intro-container ul li a {
display: block;
font-size:45px;
padding: 5px;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;
}
#intro-container ul li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
Nochmals vielen Dank im Voraus für jede Hilfe, die jemand leisten möchte. Diese Dinge sind für Anfänger verwirrend!
Richard Nash,
Los Angeles
Sie versuchen, den Text zu skalieren? Vielleicht sollten Sie einfach die font-size-Eigenschaft überblenden.
Hallo,
Ich versuche, kleine Icons mit dieser Methode zu skalieren. Es funktioniert für moz, firefox, chrome, safari… aber konnte es nicht für ie7-8 zum Laufen bringen. Ich glaube, es gibt keine direkte Unterstützung dafür. Haben Sie JavaScript oder Ähnliches, das eine ähnliche Aufgabe erfüllt?
Wird noch korrigiert. Es funktioniert jetzt perfekt in allen wichtigen Browsern. :)
Hat mir wirklich gut gefallen, Chris. Sieht großartig aus, Prost!
nette Tricks mit Bildern – danke Leute (Anfänger)
Ich habe 2 Stunden lang mit dem reibungslosen Skalieren festgesteckt – und hier habe ich diese kurze und prägnante Lösung gefunden. Vielen Dank!
Hallo,
schöner Effekt, ich benutze ihn jetzt als Haupteffekt beim Überfahren einer Website und habe ihn auch schon früher benutzt, aber ich kann nicht begreifen, wie ich ein Problem lösen kann. Während der Übergang läuft, beginnen andere Elemente in der Ansicht, sich geringfügig wahrnehmbar, aber sehr störend unerwünscht zu bewegen. Manchmal sind es andere Bilder, manchmal wird Text leicht fetter, und IMMER hat das Bild, das den Übergang ausführt, einen anfänglichen und endgültigen verschwommenen Moment, sehr kurz, aber sehr schrecklich. Was verpasse ich hier?
Hallo, ich habe genau dasselbe Problem, dass sich andere Elemente auf der Seite leicht bewegen und zittern oder was auch immer. Auch das Problem des verschwommenen Einblendens beim Zoomen. Haben Sie jemals eine Lösung für dieses Problem gefunden? Danke.
-webkit-transition: .6s ease-in-out fade; dieser Code funktioniert nicht in Google Chrome. In Mozilla funktioniert er einwandfrei. Bitte helfen Sie mir.
Hey, es scheint, dass die Reihenfolge der Parameter falsch ist,
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
versuchen Sie
-webkit-transition: opacity .6s ease-in-out
Und meines Wissens ist 'fade' keine CSS-Eigenschaft, daher kann kein CSS-Übergang darauf ausgeführt werden. Deshalb habe ich Ihre Regel von 'fade' zu opacity geändert.
und es gibt Tausende von Artikeln über CSS-Übergänge da draußen, aber der folgende ist einer der besten :)
Referenzlink ist tot.
Wirklich nett! Ich habe eine Frage… funktioniert das in IE8?
Nein, weder transform noch transition funktionieren in IE8. Schauen Sie sich http://caniuse.com/ an – es ist eine großartige Ressource, um solche Dinge nachzuschlagen.
Sehr nett… Ich habe den Höhenmodus (1, 1.1) verwendet…
Ich verwende diese Technik, um Icons in Links beim Überfahren zu vergrößern. Es funktioniert, aber die Icons springen nach Abschluss des Übergangs wieder auf ihre normale Größe zurück, anstatt so lange größer zu bleiben, wie man mit der Maus darüber fährt. Sie können es auf meiner Website hier sehen
http://s542306109.onlinehome.us/webi1911/tokyo-pop/index.html#scene-8
Das ist das relevante HTML
Und hier ist mein CSS
Weiß jemand, ob es eine Möglichkeit gibt, dies zu beheben, damit die Icons in der größeren, übergeblendeten Größe verbleiben, bis die Maus darüber hinausfährt?
Hallo, ja, es scheint seltsam, dass es beim Überfahren nur für eine begrenzte Zeit angezeigt wird. Versuchen Sie, den Link auf display: block oder inline-block zu ändern, das scheint es zu beheben.
Kenny,
Vielen Dank, das hat es behoben!
Ihre Website ist tot, Ma’am
Können Sie mir bitte einen festen responsiven Balken mit dem Firmennamen auf der linken Seite mittels CSS geben?
Wie erhöht sich das Pixel in der Eigenschaft scale(1.1)? Oder Skalieren Standardwert?
Das funktioniert in Safari jedoch nicht.
Ok, das habe ich. :)
Ich habe noch nie richtig codiert und versuche gerade, eine Website für kundenspezifische T-Shirt-Designs zu erstellen. Ich wollte wissen, wie der vollständige Code lautet und wie man ihn auf eine Bildergalerie anwendet.
Vielen Dank für die Hilfe
sehr geschätzt
Sue
Wenn das Element, das Sie skalieren möchten, ein img mit 100% Breite ist, kann der hier bereitgestellte Code in Safari problematisch sein. Die Skalierungsanimation wird beim Laden der Seite sowie beim Überfahren ausgeführt. Um dies zu beheben, ändern Sie "all" in der Übergangseigenschaft zu "transform". So
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
Ähm, so
.grow { transition: transform .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
Super :) Danke ;)
Danke, es funktioniert gut.
HTML
CSS:-
.section{position:relative;}
.hover{width:342px; height:260px; position:absolute; background-color:rgba(0,0,0,0.75); left:0; top:0; opacity:0; transition:all 0.7s ease-in-out;}
.hover:hover{opacity:1; transition: scale(1.1);}
HTML
Beim Überfahren mit der Maus wird das Bild größer als beim Entfernen der Maus, dann ist es wieder in derselben Position. In diesem Bild ist der Absatz usw. aber nur das Bild wird größer. Wir können den Absatz nicht ändern….. Wie machen Sie das…. mit CSS-Eigenschaften….?
Antwort….. sagen Sie es mir…..
Wow danke Mann, ich suchte nach etwas einfachem wie diesem, danke ;)
Hallo ,
Hier habe ich es auf eine andere Weise versucht. Das ist auch einfach und nett.
HTML-Code
Im Quellcode des Bildes können Sie Ihren Bildpfad angeben.
Probieren Sie dieses. Das ist auch nett.
Danke schön.
Danke
vielen Dank
Danke. Perfekt.
Ich möchte mein Balkendiagramm erstellen, das sich in der Höhe vergrößern sollte, wenn die Maus darüber fährt, also danke für dieses Tutorial, es ist sehr hilfreich für mich.
Haben Sie Vorschläge, wie das vergrößerte Bild beim Überfahren in der Mitte der Seite zentriert werden kann?
Wirklich wirklich wirklich nett!!!
Wirklich vielen Dank, Mann. Spart viel Zeit und nur 2 Zeilen Code.
Danke!
Gibt es eine Browsereinstellung, die Skalierung beim Überfahren und andere Übergänge blockieren/deaktivieren kann?
Sie mögen vielleicht großes technisches Wissen zeigen, aber als UX sind sie meistens nervig und ablenkend…!
Der Text innerhalb des Buttons wird während der Transformation unscharf. Hat jemand eine Lösung dafür?
… Und wenn aus irgendeinem Grund die obigen Stile nicht auf das Ziel-Element wirken, geben Sie ihm eine
display: block-Eigenschaft.Danke dafür
Es funktioniert einwandfrei, aber das Problem war, dass es für 0,1 s unscharf wird, wenn ich mit der Maus darüber fahre!
Cool
Aber wie kann ich die anderen Elemente unscharf machen, während eines skaliert wird?