Tag: css-transitions
CSS-Übergänge erlaubt, bei änderungen der Eigenschaft in der CSS-Werte auftreten, gleichmäßig über einen festgelegten Zeitraum.
Ist es möglich, animieren den übergang zwischen hintergrund-Größe: enthalten und background-size: cover?
2 Antworten
Ich weiß, es ist möglich zu animieren den übergang zwischen background-size bei der Verwendung von pixel oder prozentuale Werte mit css3, aber ich kann es nicht wieder arbeiten zu animieren zwischen contain und cover. (Ich bin mit
CSS3 transition nur, wenn die Klasse Hinzugefügt wird, nicht, wenn Sie entfernt werden
3 Antworten
Ich habe das folgende CSS-Beispiel: .message{ background-color: red; transition: background-color 5s; -webkit-transition: background-color 5s; /* Safari */ transition-delay: 2s; -webkit-transition-delay: 2s; /* Safari */ } .unreadMessage{ background-color: blue; } Dann habe ich ein DIV mit .message Klasse,
Wie animieren Sie die Elemente bewegen sich mit css3-übergängen nach dem ausblenden element
3 Antworten
Ist es möglich zu animieren, Elemente bewegen sich mit css3-übergängen nach dem ausblenden element mit jQuery .fadeOut()? Fand ich eine Art Lösung hier (siehe "Werke für Gitter auch" - Abschnitt): Aber mein Fall ist es eher so:
Verschiedene css3 transition time für "in" und "zurück" - Zustand
1 Antworten
Ich versuche, Benutzer css3 übergänge, verblassen die Deckkraft eines Elements (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp). Habe ich zum Beispiel sagen: -webkit-transition: opacity 2s ease-in-out; Gibt es einen Weg zu geben eine andere "Rückkehr zum ursprünglichen Zustand", als die 2s? Möchte ich
Fallback für CSS3 transitions
3 Antworten
Ich habe eine CSS3 übergang, Größe/Positionen ein Bild innerhalb eines div-auf hover. FIDDLE Dieser funktioniert wie gewünscht, aber meine Sorge ist, über Browser, keine Unterstützung für CSS3 transitions wie IE9-. Wäre es möglich, schreiben, der diese CSS-code
CSS3 Animieren layout ändern für floating divs
2 Antworten
Als Sie die Fenstergröße ändern, die floatenden divs wird auf die nächste Zeile umbrochen, wie erwartet. Aber ich würde wirklich gerne dieses layout ändern, um animiert werden. EDIT: nebenbei, es wäre schön, eine Lösung zu finden, das
Bild-substitution und den übergang mit css3?
3 Antworten
Ich Frage mich, Ob jemand weiß eine clevere und neue Art und Weise, wie ein übergang zwischen zwei hintergrund-Bilder? Ich weiß das es mehrere tutorials gibt, nur die meisten von Ihnen sind veraltet und alt. Ich Frage
Übergang CSS Dauer nicht funktioniert
2 Antworten
Ich kann nicht scheinen, um die Dauer übergang arbeiten auf nur eine meiner divs auf meiner Website. wenn Sie gehen, um die "Kontakt" - Abschnitt, bewegen Sie die Maus über die Karte, die divs übergang feine wenn
CSS background-color wird der übergang nicht arbeiten
1 Antworten
mithilfe der folgenden Regeln und Stylesheets .tableRow.even, .tableRowNS.even, .odd { background-color: #F2F2F2; } .tableRow.odd, .tableRowNS.odd, .even { background-color: white; } .tableRow:hover,.noProject:hover, .tableRow.even:hover, .tableRowNS.even:hover, .odd:hover, .tableRow.odd:hover, .tableRowNS.odd:hover, .even:hover { background-color: #E8E8E8; transition: background-color .5s; -webkit-transition: background-color .5s; -o-transition:
Fußzeile zu animieren, auf Blättern
5 Antworten
Momentan habe ich die Fußzeile erscheinen, sobald die Seite gescrollt einen set-point, aber möchte es zeigen, da der Benutzer scrollt, anstatt nur erscheinen auf dem Bildschirm (wie es derzeit der Fall ist). Wäre daran interessiert zu wissen,
Auf der Suche nach einem "swing"-wie die Lockerung ausdrückbar ist sowohl mit jQuery und CSS3
3 Antworten
Habe ich zwei Animationen auf ein Objekt gleichzeitig. Für eine Reihe von Gründen, ich möchte die jQuery für die vertikale animation und CSS3 für die horizontale. Auf der jQuery Seite, swing Lockerung funktioniert Super: swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}
Wie kann ich erkennen, ein übergang, ohne Ende-eine JavaScript-Bibliothek?
3 Antworten
Möchte ich ein Objekt löschen, nachdem es fertig ist animierend mit einem CSS-übergang, aber ich bin nicht in der Lage, verwenden eine JavaScript-Bibliothek. Wie kann ich erkennen, Wann die animation fertig ist? Verwende ich einen Rückruf oder
animieren von Elementen nacheinander in reinem css3 auf Schleife
2 Antworten
Ich versuche zu animieren, in die Elemente nacheinander in voller css3-Animationen. Scheint die sehr straight-forward beantworten ist mit animation-delay. Allerdings wollte ich diese in der Schleife, irgendwelche Ideen, wie man die animation in eine Endlosschleife? Fand ich
CSS-übergang Rahmen und hintergrund in der gleichen Zeit
2 Antworten
Möchte ich ändern, hintergrund-und Rahmenfarbe auf hover in der gleichen Zeit. Ich benutze: transition: all 0.5s ease; -vendors-transition: all 0.5s ease; aber die hintergrund-Farbe ändert sich sofort. Es funktioniert fein eigentlich. denken etwas anderes über-Reiten Stile. Da
Mache einen Kreis mit gepunktetem Rahmen in css und Animation auf hover
2 Antworten
Ich versuche zu animieren, eine css-Kreis. Wenn der Benutzer schwebt es, die Grenze des Kreises soll eine gepunktete Linie, und es sollte animieren, wie ein Spinnrad. Ich kann es drehen für eine bestimmte Zeit, aber ich konnte
Website Umfang nicht nach unten für mobile Bildschirme
2 Antworten
Ich mache eine Website für desktop, tablet und Smartphone-Displays. Dafür bin ich mit css media queries. Wenn ich zum testen meiner website auf desktop-browser, und wenn ich den Maßstab meiner web-bowser unten, dann ändert sich das layout,
Glatte Infinite Scrolling Banner [CSS]
1 Antworten
Suchen, um dies zu optimieren, infinite-scrolling-Effekt, aber ich bin mir nicht ganz sicher, wie Sie Sie erstellen einen reibungslosen übergang bei der Schleife zurück zu dem ursprünglichen Bild. Bei 10s ist das kaum spürbar, aber bei der
CSS-Menü Übergang
1 Antworten
JSFiddle: http://jsfiddle.net/x6bM3/ Wenn Sie den Mauszeiger über die Produkte, die link, den Sie sehen, habe ich eine drop-down-Effekt, aber was ich versuche zu tun, ist geben Sie ihm einen schönen übergang statt es nur zu erscheinen. Ich
CSS animation : verschieben eines div mit der neuen position relativ zu der vorherigen
2 Antworten
für eine bessere Leistung, die ich ersetzen will: $('#foo').animate({ left: '+=42px' }, 500); durch einen übergang (oder eine animation) CSS3. Aber wie können wir tun, um zu implementieren "+=" auf der linken Seite-Eigenschaft in CSS? Bewegen, wie
Wie kann ich mithilfe von CSS-transitions animieren, ein responsive layout die vertikale Ausrichtung?
2 Antworten
Ich versuche herauszufinden, ein Weg, um reibungslos zu animieren reaktionsschnell Weg ändern, auf einige Elemente' display - Eigenschaft, wenn der browser die Größe und ab einem bestimmten Haltepunkt. Ich möchte mit CSS-übergängen, aber Sie gelten nicht für
CSS3 transition arbeiten eine Möglichkeit, aber nicht die anderen
1 Antworten
Ich habe eine <div> ist conditionaly hat man entweder zwei-Klassen - ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}" Die erste Klasse wird immer hidden, und wenn visible ersetzt, die Klasse der width, left und opacity Eigenschaften sind alle animiert mit
Hover Übergang in Bootstrap Navbar Menü
1 Antworten
Fand ich in diesem codepen, wo eine css-übergang verwendet wird, um zu erreichen ein Gleit-Effekt auf schweben. http://codepen.io/tdevine33/pen/CnDyv Aber ich kann nicht machen es auf meine bootstrap navigation bar. Ist es unvereinbar mit dem Menü in Bootstrap?
CSS transition fade element
2 Antworten
Möchte ich so blenden Sie ein element sichtbar und unsichtbar. Ich weiß, ich kann dies tun, indem Sie: element { opacity:1; } element.fade { opacity:0; transition: opacity .5s linear; } Das problem dabei ist, dass die (jetzt)
Fade-in dynamisch generierte Inhalte mit Bootstrap 3
2 Antworten
Habe ich gelesen mehrere ähnlich Fragen auf SO zu Bootstrap ist fade Klassen, aber keiner von Ihnen scheinen zu meinen Problem. Ich verstehe, dass die fade-animation in Bootstrap 3 funktioniert durch Umschalten opacity zwischen 0 und 1
Zeigen Sie div nach 10 Sekunden ein-und ausblenden, nach 10 Sek.
6 Antworten
Ich muss ein div-Element (z.B. #mybox) in 10secs nach dem laden der Seite, halten Sie es sichtbar für andere 10 Sek. und dann verstecken Sie mit einem schönen Schiebe-in/out-Effekte. Vielen Dank für jegliche Hinweise/hilft! Was haben Sie
Animieren.css-Klasse Mauszeiger nennen
3 Antworten
Ich verwenden Sie diese Klasse zum animieren div/img-und andere: http://daneden.me/animate/ Ich brauche Aktivierung ".animated bounce" - Klasse Mauszeiger aber mit pseudo-div, ist das nicht problem nennen, wenn das laden der Seite <div class="first"> <div class="second animated bounce">
jquery image resize transition onMouseOver
3 Antworten
gerade gefragt, ob es irgendein jquery-plugin, dass, wenn Ihre Maus über ein Bild, dieses Bild wird in der Größe erhöhen und wenn deine Maus aus dem Bild heraus, es wird verkleinert und dies alles zu einem glatten
Animieren line-through text mit CSS
1 Antworten
Ist es möglich, verwenden Webkit-Animationen/übergänge zu animieren, eine durchgestrichene Linie durch ein Wort von Links nach rechts? Soweit ich sagen kann, ich kann nur machen, fade in/out, nicht animieren, dass er Auffällig dem text heraus. Jede Hilfe
gewusst wie: ändern der Höhe einer div bei hover und mit transition (Priorität von CSS ohne Javascript)
2 Antworten
Dies ist der code HTML <div id="footmain"> <div id="col1" class="mark"></div> <div id="col2" class="mark"></div> <div id="col3" class="mark"></div> <div id="col4" class="mark"></div> </div> sehen hier ein Beispiel mit der CSS, die ich habe: http://jsfiddle.net/EtBKx/8/ Muss ich fallen lassen mit der
verwenden übergang auf ::-webkit-scrollbar?
5 Antworten
ist es möglich, übergänge auf webkit-scrollbars? Ich habe versucht: div#main::-webkit-scrollbar-thumb { background: rgba(255,204,102,0.25); -webkit-transition: background 1s; transition: background 1s; } div#main:hover::-webkit-scrollbar-thumb { background: rgba(255,204,102,1); } aber es funktioniert nicht. Oder ist es möglich, erstellen Sie einen ähnlichen
Owl Carousel-Übergänge-Effekt Funktioniert Nicht Nach Chrome Neueste Update (V36)
4 Antworten
bin ich mit dem OWl-Karussell, für eine Weile, nicht alles perfekt, aber vor kurzem Stand ich vor einem Problem, nachdem mein chrome-browser zu aktualisieren. Die css-transition-Effekte werden nicht mehr auf chrome. Aber alle Effekte, die gut funktioniert
Wie zu animieren Umschalten der Zeilen?
2 Antworten
Möchte ich animieren, die erscheinen und verschwinden der Zeilen. Zunächst versuchte ich mit einem CSS - übergang, aber es Tat nichts, aufgrund der änderung der display Eigenschaft. So, ich habe eine animation, die funktioniert wie erwartet. Das
CSS-Übergang Breite der div-box zu erweitern, um die Links wenn die Maus schwebt über ihm
2 Antworten
Ich habe ein Interessantes problem, das ich zu lösen versuche. Ich habe diese Spenden-Schaltfläche, die erstellt wird, mithilfe der folgenden css. #donate-button { width: 211px; position: absolute; background: #FFBC2F; color: #FFF; left: 1140px; right:1340px; z-index: 30; top:
Wie kann ich den übergang height: 0; auf height: auto; Verwendung von CSS?
44 Antworten
Ich versuche, eine <ul> nach unten schieben, mit CSS-übergängen. Den <ul> beginnt bei height: 0;. Auf schweben, die Höhe ist festgelegt height:auto;. Dies ist jedoch verursachen, dass es zu einfach erscheinen, nicht übergang, Wenn ich es von
CSS-Übergang - erleichtert, aber nicht verlangsamen?
1 Antworten
Ich habe ein kleines problem bezüglich meiner Bilder, als hier gezeigt (http://jsfiddle.net/garethweaver/Y4Buy/1/). CSS: .img-blur:hover { -webkit-filter: blur(4px); transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out;
Animieren Maus lassen sich mit CSS und jQuery?
2 Antworten
Ich bin mit CSS-transitions animieren, hintergrund-Farbe auf Maus hover. Ich habe den folgenden code: CSS: div { width: 100px; height: 100px; background: red; } div:hover { background: green; transition: all 0.5s ease-in-out; } HTML: <div></div> Dieser code
Was sind die "Goldenen Regeln" zu erhöhen CSS3-transition performance auf mobilen Geräten?
1 Antworten
Ich bin mit ein paar wirklich einfachen CSS3-übergängen in meiner app, wie im folgenden Beispiel, wo ich versuche, um die Folie in einem div-container von Links nach rechts: <div id="navi"> <form> <input>...</input> </form> <ul> <li>...</li> <li>...</li> <li>...</li>
Warum übergänge für einige CSS-Eigenschaften sind langsam, und keiner fließend
2 Antworten
Verbrachte ich in einem Kampf von 4 Stunden auf eine einfache transition mit einem akzeptablen Leistung: Zuerst habe ich versucht diesen code : left: 2000px; -webkit-transition: left 1s linear; -moz-transition: left 1s linear; -ms-transition: left 1s linear;
css3 background-size übergang Animationen in Webkit funktioniert nicht... Bug? Oder falsche syntax?
7 Antworten
Animation der background-size-Eigenschaft scheint nicht zu funktionieren, in Chrome oder Safari. CSS: div { width: 161px; height: 149px; background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center; background-size: 50% 50%; transition: background-size 2s ease-in; -moz-transition: background-size 2s ease-in; -web-kit-transition: background-size 2s
CSS :nach hover-Übergang
3 Antworten
Den HTML-Struktur <div id="small_gal"> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> </div> Werden die Bilder mit Schlagschatten so border ist
Trigger CSS3 übergang auf die Seite laden
3 Antworten
Ich versuche zu erreichen, laden Einfluss auf das laden der Seite durch CSS3 Breite übergang. Hier ist die demo. HTML <div class="skill-bar"> <span class="w70"></span> </div> CSS .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position:
CSS hover-überblendung cross-browser-Kompatibilität
2 Antworten
Habe ich eine einfache Sprache wählen Sie die Seite mit reinem CSS animierte übergänge. Ich habe ein jsFiddle hier. Wie soll es sich Verhalten wie folgt: Benutzer die Maus über einen der zwei (oder mehr) Sprache Auswahlen.
Animation eines Elements Breite von 0 bis 100%, und es ist der wrapper wird nur so breit wie Sie sein müssen, ohne eine VORGEGEBENE Breite in CSS3 oder jQuery
4 Antworten
http://jsfiddle.net/nicktheandroid/tVHYg/ Wenn die Maus .wrapper, es ist Kind-element .contents sollte animieren von 0px zu seiner natürlichen Breite. Dann, wenn man die Maus entfernt .wrapper es sollte animieren, wieder nach unten zu 0px. Die .wrapper element sollte nur
Gleiten in einem festen element mit CSS3 transitions
1 Antworten
Habe ich ein element mit fester position und auto-Breite (müssen auto-Breite), die Folie von der linken Seite. Habe ich definiert zwei Staaten für Sie: versteckt und sichtbar. Wenn sichtbar sollte es sein, positioniert auf der linken Seite
Wie man ein CSS3-keyframe-animation einmal, und nur, wenn er ausgelöst wird?
1 Antworten
Ich würde gerne die Implementierung einer HTML5-animation umfasst ein bisschen mehr als nur ein Element verschieben von Punkt A zu Punkt B. Das ist, warum ich überlege, mithilfe von keyframes eher als übergänge. Ich möchte jedoch nur
CSS-Übergänge max-width und max-height
2 Antworten
So, ich habe eine object innerhalb einer div container. Das Objekt hat die max-width (600px) und max-height (400px) Eigenschaften festgelegt. Wenn ich mit dem Objekt, die Eigenschaften werden festgelegt, um none so das Objekt width und height
Css-Übergang auf hover für Kind-element
2 Antworten
Im Versuch zum anhalten der Anzeige von einem Kind-element, wenn es ein Elternteil ist mit der Maus auf. Html: <span> <div>This Is The Child</div> Some Text in the span </span> Css: span { position: relative; } span
jQuery Animation mit Zoom-In & verkleinern
1 Antworten
Möchte ich animieren, ein logo mit jQuery automatisch, wenn die Seite geladen wird. Zuerst muss das Bild verkleinert und dann vergrößert und verändert es sich zu einem anderen Bild.Wie kann ich das mit jQuery? Bitte helfen Sie
Wie zum erstellen von CSS3-bounce-Effekt
2 Antworten
Ich versuche zum erstellen einer bounce-Effekt am Ende der animation ohne 3rd-party-code oder javascript. Ich habe keine Ahnung, wie dies zu tun, nur mit reinem CSS. Hier ist was ich habe, so weit: HTML: <div></div> <div></div> <div></div>
Kann ich das anwenden einer CSS-übergang in die overflow-Eigenschaft?
4 Antworten
Ich versuche transition-delay zu den overflow Eigenschaft von body wenn ein div geklickt wird, durch das hinzufügen einer Klasse zur body wie folgt: JS: $("div").click(function(){ $("body").addClass("no_overflow"); }); CSS: div{ background:lime; height:2000px; } .no_overflow{ overflow:hidden; } body{ overflow:auto;