Tag: css-transitions

CSS-Übergänge erlaubt, bei änderungen der Eigenschaft in der CSS-Werte auftreten, gleichmäßig über einen festgelegten Zeitraum.

Zwei-Ton-hintergrund, geteilt durch die Diagonale Linie mit css

Anzahl der Antworten 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,

CSS3 übergänge auf pseudo-Elemente (:after, :before) nicht funktioniert?

Anzahl der Antworten 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.

CSS3 transition fadein mit display:none

Anzahl der Antworten 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":

css-übergang Deckkraft der Hintergrundfarbe

Anzahl der Antworten 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

CSS3 Transition Ease in-und out-Box-Shadow

Anzahl der Antworten 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

CSS3-Transform verursacht, text flackern in Safari und Firefox Mac Yosemite

Anzahl der Antworten 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

CSS3 übergänge hinzufügen möchten, ein Farb-und ausblenden

Anzahl der Antworten 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

Mit CSS3-Transformationen/Animationen mit font-face produziert "wackelig" spinner gif-wie

Anzahl der Antworten 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ß

Der übergang hintergrund-Farbe über die Folie bis die animation

Anzahl der Antworten 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

Erkennen von css transitions mit javascript (und ohne modernizr)?

Anzahl der Antworten 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

css3 transition animation beim laden?

Anzahl der Antworten 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

Animieren die CSS-transition-Eigenschaft innerhalb :after/:before-pseudo-Klassen

Anzahl der Antworten 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 {

CSS-Übergang von `display: none` bei Klassenwechsel?

Anzahl der Antworten 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

CSS-Übergang mit linearem Gradienten

Anzahl der Antworten 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:

Transparente CSS-Hintergrundfarbe

Anzahl der Antworten 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

CSS transformiert VS-Übergänge

Anzahl der Antworten 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

CSS3 Animation und Anzeige Keine

Anzahl der Antworten 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

Wie haben Sie mehrere CSS-Übergänge auf einem Element?

Anzahl der Antworten 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

Verwenden von CSS für den Einblendeffekt beim Laden der Seite

Anzahl der Antworten 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

Wie erstelle ich ein React-Modal (welches an `& lt; body & gt;` angehängt ist) mit Übergängen?

Anzahl der Antworten 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

IE 10 + 11: CSS-Übergänge mit calc () funktionieren nicht

Anzahl der Antworten 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.

CSS3 Übergänge: Ist "Übergang: alle" langsamer als "Übergang: x"?

Anzahl der Antworten 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}

CSS übergeht neue Elemente

Anzahl der Antworten 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:

CSS3-Übergangsverzögerung eines bestimmten Attributs

Anzahl der Antworten 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

Wie kann verhindert werden, dass sich das Webkit-Text-Rendering während des CSS-Übergangs ändert?

Anzahl der Antworten 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)

Kann ich absolut positioniertes Element mit CSS-Übergang animieren?

Anzahl der Antworten 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

Verwendung von transform: translateX, um ein untergeordnetes Element horizontal um 100% über das übergeordnete Element zu verschieben

Anzahl der Antworten 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

CSS3-Übergang bei Klick mit reinem CSS

Anzahl der Antworten 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

Wenden Sie CSS-Eigenschaften an, wenn der Übergang beendet ist

Anzahl der Antworten 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:

Hover-Effekte mit CSS3-Berührungsereignissen

Anzahl der Antworten 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

CSS-Übergangs-Kurzschrift mit mehreren Eigenschaften?

Anzahl der Antworten 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

Ich brauche CSS3-Übergang, um in IE9 zu arbeiten

Anzahl der Antworten 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

Jerky CSS transformieren Übergang in Chrome

Anzahl der Antworten 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

Css3-Übergang nur auf der Skala

Anzahl der Antworten 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;

ist es möglich, Flexbox-Einsätze & amp; entfernt?

Anzahl der Antworten 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

CSS-Übergang, der nicht ausgelöst wird

Anzahl der Antworten 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

CSS-Übergänge funktionieren nicht, wenn sie über JavaScript zugewiesen werden

Anzahl der Antworten 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,

Webkit-Unterstützung für Gradientenübergänge

Anzahl der Antworten 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));

Verwenden von CSS zum Überführen der Fülleigenschaft eines SVG-Pfads bei Hover

Anzahl der Antworten 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 -

Übergänge auf dem Display: Eigenschaft

Anzahl der Antworten 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

Überlauf: Versteckt ignoriert mit border-radius und CSS-Transformationen (nur Webkit)

Anzahl der Antworten 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

Verwenden Sie CSS3-Übergänge mit Farbverlaufshintergründen

Anzahl der Antworten 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 () -

PolyFill / Shim für CSS-Übergänge und Animationen

Anzahl der Antworten 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

-Webkit-Übergang mit Display

Anzahl der Antworten 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

Warum verlangsamt das Aktivieren der Hardwarebeschleunigung in CSS3 die Leistung?

Anzahl der Antworten 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.

Deaktivieren der Bootstrap Navbar-Übergangsanimation

Anzahl der Antworten 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

Wie kann ich CSS3 Übergang auf alle Eigenschaften mit Ausnahme von Hintergrund-Position bewerben?

Anzahl der Antworten 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

CSS3-Übergangsereignisse

Anzahl der Antworten 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

Beim Schweben über den CSS-Übergang in Safari werden bestimmte Schriftfarben aufgehellt

Anzahl der Antworten 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

Mehrere Übergänge für Twitter Bootstrap. Transition?

Anzahl der Antworten 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);: