Tag: css-transitions
CSS-Übergänge erlaubt, bei änderungen der Eigenschaft in der CSS-Werte auftreten, gleichmäßig über einen festgelegten Zeitraum.
2
Antworten
Ich versuche, ein Hintergrundbild erstellen mit css, wo die eine Seite ist einfarbig und die andere ist eine textur: die beiden sind geteilt durch eine Diagonale Linie. Ich möchte diese auf 2 separate divs, da ich Plane,
2
Antworten
Zeige ich die title - Attribut eines Links auf :hover. Das title-Attribut angehängt wird, um die Verknüpfung per :after... Nun Frage ich mich, wie kann ich das animieren der Deckkraft der :after pseudo-element wenn die Maus-und Schwebeflug-out.
5
Antworten
Habe ich einige element möchte ich fade mit CSS3. Es kann einfach durch die 2-Klassen opacity: 0 und opacity: 1aber problem ist verblasst element einige dropdown-Menü und es hat Elemente unter es so, selbst wenn es "Deckkraft":
1
Antworten
suchen Ahnung, wie man die Opazität der Hintergrundfarbe mit übergang? Ich bin mit rgba() Funktion, aber der übergang ist nicht bei hover. .bx{ background:rgba(255,0,0,0.5); width:100px; height:100px; position:relative; transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -webkit-transition: opacity
1
Antworten
Ich versuche div id Leichtigkeit in die und aus der einen box-shadow mit CSS3. Den aktuellen CSS, die ich habe ist: #how-to-content-wrap-first:hover { -moz-box-shadow: 0px 0px 5px #1e1e1e; -webkit-box-shadow: 0px 0px 5px #1e1e1e; box-shadow: 0px 0px 5px
7
Antworten
Ich habe dieses seltsame Problem auf Safari und Firefox (Mac/Yosemite), die bewirkt, dass fast alle der text auf der Seite an zu flackern, wenn die Maus über das element verwandeln. Beispiel gif: (Firefox, Yosemite) .usp { //USP
2
Antworten
Möchte ich ein DIV-hintergrund (, die nicht über einen hintergrund-Farbe), flash-rot, dann Abbremsen auf wieder blank. jetzt habe ich verwendet, JS, um eine neue KLASSE hinzuzufügen (wodurch der rote) auf das DIV in Frage und CSS3 zum
4
Antworten
Ich bin mit CSS-Transformationen/Animationen mit font-face (twitter bootstrap/font-awesome) zu produzieren, ein spinner gif-like-Symbol. Das problem ist, dass das icon wackelt, wie es dreht sich um 360degrees. Siehe dieses JSFiddle , um zu sehen, was ich meine. Weiß
1
Antworten
Ich versuche, ändern Sie die hintergrund-Farbe eines Elements auf hover mit CSS-übergängen. Ich möchte dies tun, indem er es nach oben Blättern von unten. Ich kann verblassen der hintergrund bei der Verwendung dieser, aber ich möchte es
5
Antworten
Wie würde ich erkennen, ob ein browser unterstützt css transitions mit javascript (und ohne Verwendung von modernizr)? InformationsquelleAutor der Frage Toby Hede | 2011-09-01
7
Antworten
Ist es möglich, mit CSS3 transition animation beim laden der Seite ohne Javascript zu verwenden? Dies ist eine Art, was ich will, aber beim laden der Seite: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Was ich bisher gefunden CSS3 transition-delayeinen Weg zur Verzögerung
4
Antworten
Ist es möglich, zum animieren von CSS-pseudo-Klassen? Sagen, ich habe: #foo:after { content: ''; width: 200px; height: 200px; background: red; display: block; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } #foo:hover:after {
4
Antworten
Habe ich angefangen mit übergängen zu "modernisieren" feel " einer Website. Bisher :hover übergänge sind großartig. Jetzt Frage ich mich, ob es möglich ist, zum auslösen einer transition basierend auf andere Dinge, wie zum Beispiel, wenn eine
5
Antworten
Ich versuche, fügen Sie einen übergang zu einem button, den ich, den hintergrund mit css-linear-gradient aber es funktioniert nicht. Dies ist der css-Code für meinen button. a.button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956)); -webkit-transition:
6
Antworten
Ich möchte, um die Liste im Menü verschwinden, indem Sie mit der Deckkraft, ohne Schrift. Ist es möglich mit CSS3? InformationsquelleAutor der Frage Saranya | 2012-06-25
1
Antworten
Was sind die wichtigsten Unterschiede zwischen CSS-Transformationen und-übergänge? Beide verwendet werden zum ändern der aktuellen Form/Zustand eines Objekts. (Sie können den hübschen Animationen mit JS etc..) Aber es ist immer noch nicht klar für mich, die Sie
7
Antworten
Ich habe eine CSS-3-Animationen für ein div, dass die Folien nach einer gewissen Zeit. Was ich möchte ist, dass ein paar divs um den Raum zu füllen der animierten div, dass die Folien, die er dann schieben
7
Antworten
Es ist eine ziemlich einfache Frage, aber ich kann nicht finden, eine sehr gute Dokumentation über die CSS-transition-Eigenschaften. Hier ist der CSS-snippet: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0
3
Antworten
Können CSS-Übergänge verwendet werden, um zu ermöglichen, einen text Absatz für fade-in beim laden der Seite? Ich mag, wie es aussieht auf http://dotmailapp.com/ und würde gerne einen ähnlichen Effekt mit CSS. Hinweis: Die domain hat da schon
8
Antworten
Es ist ein modal in dieser Antwort https://stackoverflow.com/a/26789089/883571 die eine Reagieren-basierten Modalen indem es zu <body>. Allerdings fand ich es nicht kompatibel mit dem übergang addons zur Verfügung gestellt von Reagieren. Wie man erstellen mit übergängen(beim betreten
1
Antworten
Ich bin animieren Sie einen container auf mouseover von rechts nach Links mit CSS-übergängen. Dies funktioniert in allen Browsern außer dem Internet Explorer. Der Grund ist, dass ich (und auch benutzen müssen) calc() in meiner CSS left-Eigenschaft.
2
Antworten
Ich habe eine Frage zu rendering-Geschwindigkeit für die css3-transition-Eigenschaft. Angenommen ich habe eine Reihe von Elementen: div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1}
3
Antworten
Ich kann nicht einen Weg finden, um css-übergänge, die auf neu erstellte dom-Elemente. sagen wir, ich habe ein leeres html-Dokument. <body> <p><a href="#" onclick="return f();">click</a></p> </body> Ich habe auch diese css - #id { -moz-transition-property: opacity; -moz-transition-duration:
1
Antworten
im moment bin ich styling ein Textfeld durch ändern der hintergrund-und Schriftfarbe auf hover : transition: background-color 1s, color 1s; Ich würde jetzt gerne die Farbe ändern, nachdem Sie die Hintergrundfarbe, indem Sie mit transition-delay. Das problem
9
Antworten
Ich bin mit CSS-übergänge, um den übergang zwischen CSS umgewandelt Staaten (die im Grunde den übergang in der Größe eines Elements). Ich merke, dass, wenn das element den übergang, den rest des Textes auf der Seite (Webkit)
3
Antworten
Möchte ich animieren ein element die position ändern mit CSS-übergang, aber es funktioniert nicht auch wenn ich den übergang auf all Eigenschaften, wie im Beispiel hier: http://jsfiddle.net/yFy5n/3/ Aber ich will nicht, dass meine endgültige Lösung der übergang
2
Antworten
Alle, Ich würde gerne in der Lage sein zu verwenden translateX zu animieren, ein Kind-element 100% der Weg an die Eltern (d.h., vom linken Rand zum rechten Rand). Die Herausforderung ist, dass die Prozentsätze in translateX beziehen
5
Antworten
Ich versuche ein Bild (plus-symbol) drehen um 45 Grad zu schaffen, ein Kreuz-symbol. Ich habe es bisher geschafft dies zu erreichen, verwenden Sie den code unten, aber seine arbeiten schweben, ich wollte es haben, drehen Sie auf
2
Antworten
Wie muss ich die Eigenschaften einer Bescheinigung gilt für ein element nach die CSS3 transitions Ende? Ich habe so etwas wie: .something { background: blue; padding: 10px 0px; background-clip: content-box; transition: box-shadow 300ms; } .something:hover { box-shadow:
2
Antworten
Ich bin mit CSS3 hover-und übergänge zum ein-und ausblenden eines Bildes. Auf mobilen Geräten möchte ich nutzen, den gleichen übergang für touch-Ereignisse. Grundsätzlich die erste Berührung führen würde den hover-Effekt oder rollover, und die touch-up durchführen würde
6
Antworten
Ich kann nicht scheinen zu finden, die richtige syntax für CSS-übergang Kürzel mit mehreren Eigenschaften. Dies ändert nichts: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s
2
Antworten
Ich eine Grußkarte erstellen, die für einen client mit css-übergang, aber ich wusste nicht, dass es nicht kompatibel mit IE9. Die Grußkarte ist dieses http://voeux.geekarts.fr/v4.html Gibt es einen Weg, um diese Arbeit in IE9 ? putting ein
2
Antworten
Ich bin mit CSS3 transform auf einem hintergrund-Bild auf hover. Habe ich getestet in den aktuellen Browsern von Opera, Safari und Firefox und die Arbeit schön glatt, allerdings in Chrom-der übergang ist sehr ruckartig. Hier ist der
1
Antworten
Bin ich etwas fehlt offensichtlich. Aber der übergang auf nur ein element nicht funktioniert, hier. Hier ist mein code. #navigatore-servizi ul li a { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 #008; display:block; width:240px; height:96px; background:#000;
2
Antworten
Wenn ich Sie entfernen ein Element aus einer flexbox, die verbleibenden Elemente "einrasten" in Ihren neuen Positionen sofort, anstatt zu animieren. Konzeptionell, da die Elemente verändern Ihre Positionen, ich würde erwarten, dass die übergänge zu bewerben. Habe
6
Antworten
Ich bin momentan dabei, ein DOM-element (div), indem es auf dem DOM, dann eine änderung seiner Breite alle in einem schnellen Treffer in javascript. Diese in der Theorie sollte der Auslöser einer CSS3 transition, aber das Ergebnis
4
Antworten
Ich habe einige große Kopfschmerzen versuchen zu gelten, CSS3-übergänge, um eine Diashow Trog JavaScript. Grundsätzlich das JavaScript ruft alle Dias in der Diashow und wendet die CSS-Klassen, um die richtigen Elemente zu geben, einen schönen animierten Effekt,
5
Antworten
Im Frage mich, ob jemand weiß, Wann webkit-Unterstützung der übergänge der Farbverläufe? zum Beispiel, der folgende code funktioniert nicht in Chrome 6 (vorausgesetzt, grad-übergang ist ein link): .grad-transition { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
1
Antworten
Ich bin auch eine SVG-image-Datei auf meine Seite innerhalb object tag, wie diesem: <object type="image/svg+xml" data="linkto/image.svg"> <!-- fallback image in CSS --> </object> Das fragliche Bild ist eine Weltkarte, ich will, um den übergang des fill -
26
Antworten
Bin ich derzeit der Gestaltung einer Art von CSS "mega-dropdown" - Menü - im Grunde eine normale CSS-only dropdown Menü, sondern enthält verschiedene Arten von Inhalten. In dem moment, es scheint, dass die CSS3-Übergänge gelten nicht für
3
Antworten
Möchte ich ein quadratisches Bild in einem Kreis. Wenn der Benutzer mit der Maus über das Bild, wird das Bild skaliert (zoom-in). Sollte der Kreis bleibt die gleiche Größe. Nur bei der CSS-übergang, das Quadrat, das überschneidet
11
Antworten
Ich versuche, die Umstellung auf hover mit css über eine Miniaturansicht, so dass Sie auf schweben, der hintergrund-Verlauf eingeblendet wird. Der übergang ist nicht funktioniert, aber wenn ich ändern Sie einfach es zu einer rgba () -
2
Antworten
Google versagt, mich etwas in diese (ich denke, weil die Terminologie für PolyFill/Shim/Spachtelmasse ist neu und vielfältig im moment). Ich bin auf der Suche nach einem guten JavaScript-PolyFill oder Shim für webkit (und jetzt als der RC
4
Antworten
Gibt es eine Möglichkeit zu nutzen -webkit-transition mit display? Ich bin mit CSS display zu verbergen und zeigen eine Navigation zweite Ebene ... aber nur display: none und display: block auf :hover ist ein wenig un-sexy... eine ease
6
Antworten
Ich mich bewege 6000 kleine div-Elemente in einem css3-experiment mit einem übergang von top: 0 zu top: 145px Leistung zu testen. Mit keine hardware-Beschleunigung läuft auf Google Chrome. Wenn ich die hardware-Beschleunigung via translateZ(0) Leistung wird schrecklich.
6
Antworten
Genau wie http://twitter.github.com/bootstrap, Den Ort, was ich jetzt responsive ist. Möchte ich entfernen übergang animation wenn ich auf das minimierte navbar Menü-Taste. Bild oben ist der screenshot von dem, was ich verlange. In OBEN-RECHTS-ECKEes ist ein drei
6
Antworten
Ich würde gerne für ein CSS-übergang zu allen Eigenschaften-abgesehen von background-position. Ich habe versucht, es zu tun auf diese Weise: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all
6
Antworten
Gibt es irgendwelche Ereignisse ausgelöst, die von einem element zu prüfen, ob eine css3 transition begonnen hat oder zu Ende? InformationsquelleAutor der Frage Andreas Köberle | 2010-05-08
7
Antworten
In meinem CSS habe ich definiert, dass ein übergang für eine Klasse. Aus irgendeinem Grund, wenn ich den Mauszeiger über die Klasse mit dem übergang, der transition-duration aus irgendeinem Grund ändert sich die Farbe der Schrift an
1
Antworten
Ich bin zu wollen, animieren Sie zwei Eigenschaften, die in der Bootstrap v2.1.0, Den opacity und die margin. Habe ich versucht: .transition(opacity 0.5s, margin 0.25s);: Keine Ausgabe .transition('opacity 0.5s, margin 0.25s');: Ungültige CSS-Ausgabe .transition(opacity 0.5s); .transition(margin 0.25s);: