Tag: css-transitions
CSS-Übergänge erlaubt, bei änderungen der Eigenschaft in der CSS-Werte auftreten, gleichmäßig über einen festgelegten Zeitraum.
Animieren Margen und Polsterung mit CSS-Übergang verursacht, sprunghafte animation
2 Antworten
In meinem persönliche website, ich bin mit der CSS3 Transition-Eigenschaft auf die top-nav zu animieren, die Seitenränder und Textabstand eines Elements mit einer Grenze, um die Grenze Dünung schweben. Relevante markup: <nav> <a class="email" href="mailto:notmyrealemailaddress"> <div class="icon-border">
CSS3 transition auf einem hintergrund-Bild
2 Antworten
Will ich tun, ein CSS3-transform: rotate(360deg); ein übergang 1s; auf einem hintergrund-Bild statt ein separates Bild (- element).. Ist das möglich? Gesucht hab ich die Hölle aus Google, aber ohne Erfolg! Was ich versuche zu erreichen, ist
wie man glatte Graustufen auf hover mit CSS
2 Antworten
Ich habe das logo in meiner website, es ist grayscaled auf schweben, ich will es farbig, glatt. es funktioniert, aber nicht reibungslos. ich bin mit CSS-übergang. Dies ist mein code <img alt="TT ltd logo" src="./img/tt-logo.png" class="tt-logo" />
Imitieren CSS3 transition im IE?
5 Antworten
Bin ich mit einer Kombination von Regeln zu erreichen, die CSS3 transition Regel in cross-browser-kompatibel wie möglich: ich bin mit transition, -webkit-transition, -moz-transition, und -o-transition. Gibt es ein ähnliches -ms-transition Eigenschaft für eine beliebige version von Internet
Leichte, mobile kompatibel, moderne, Kostenlose alternative zu FancyBox 2
1 Antworten
Ich bin auf der Suche nach einer alternative zu FancyBox 2. Es sollte leichte, mobile-freundlich (verwenden Sie die hardware-beschleunigte css-übergänge), und frei zu verwenden, kommerziell (FancyBox nicht). Irgendwelche guten alternativen? InformationsquelleAutor Tzach | 2013-09-13
beim skalieren ein element mit css3 skalieren, es wird pixelig, bis kurz nachdem die animation beendet ist. Ich bin animieren ein element mit einem Rahmen
1 Antworten
http://jsfiddle.net/nicktheandroid/5Ytnj/ Wenn ich -webkit-backface-visibility: hidden; zu den .circ element, es bewirkt, dass es zu bleiben pixelig, auch nachdem die animation beendet ist. Frage ich mich, ob es gibt einen Weg, um es nicht pixelate während der Animation.
Webkit-Opacity Probleme bei der Umstellung mit Text
2 Antworten
Situation: Ansicht die jsFiddle Innerhalb eines div ich habe ein Bild, gefolgt von text, der einer font-weight von 900 auf. In meinem lokal gehosteten Umgebung ich bin mit einer benutzerdefinierten schriftart, aber für die Geige oben wählte
Trigger-animation auf element klicken Sie in reinem CSS
2 Antworten
Sagen wir, ich habe ein einfaches element: <a href="#" id="btn" onclick="return false">Click</a> Kann ich jetzt ändern Sie das Aussehen dieses element auf Klick über :active: #btn:active { background: red; } Was ich möchte ist jedoch, dass das
Übergang nur für den Rahmen auf zu schweben, aber nicht für den hintergrund
2 Antworten
Hier habe ich einige CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid
Ist es möglich, verschiedene Dauer/delay für transform-Optionen?
3 Antworten
Möchte ich mehrere transformationsoptionen für meine html-Objekt, jedoch mit unterschiedlicher Dauer und Verzögerung. Wenn ich versuche, so etwas wie, dass: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Dann habe ich verschiedene Zeit-Funktion
absolute position gedreht element rechts
2 Antworten
Im Versuch, herauszufinden, wie man Reiter Warenkorb würde, positioniert auf der rechten Ecke und auch um 90 Grad gedreht. Die rotation natürlich mischt sich die position, aber vielleicht gibt es einen workaround, der Umbruch auf verschiedene Wrapper
css3 Höhe übergang nicht funktioniert
3 Antworten
ich habe ein problem mit css3 transitions wie kann ich den übergang glatt erscheint es sofort ich möchte die div-box zu langsam ändern Ihre Höhe, wenn ich den Mauszeiger über Sie der html-code <div id="imgs"> <img src="http://chat.ecobytes.net/img/emoticons/smile.png"
Ich Möchte die Verzögerung Auf die Maus in css
3 Antworten
Ich versuche zum anwenden einer Verzögerung, bevor eine CSS-transition, die auf mouse-out-Ereignis. Mein CSS-code ist unten, bitte lassen Sie mich wissen, wie die Zeitverzögerung, bevor der CSS-übergang auf die Maus beginnt. Möchte ich erreichen, dass das Menü
Unterstreichen css3 transition
1 Antworten
Wie erstelle ich eine unterstreichen animation von Links nach rechts auf hover in CSS3? InformationsquelleAutor ziltoid | 2013-03-19
CSS3-Transform wirkt sich auf andere Elemente mit chrome/safari
4 Antworten
Ich habe ein Problem, wo mein css3-Transformationen bewirken andere Elemente auf der Seite und auch wodurch Sie mit einer Art flackern. Ich sah noch einen post über diesem, aber Sie haben nicht eine resolution mit dem Thema.
Eckig-Material-Design Animation
1 Antworten
Ich bin derzeit an der Entwicklung einer mobilen web-Anwendung mit AngularJS, ngAnimate, Eckig-Material und UI-Router. Ich bin nach Google Material Design-Vorgaben für die UI - /UX-Teil. Möchte ich animieren, um einen Zustand zu ändern, 'die Winkel-Weg" und
Überlegungen für CSS3-Transition Performance
4 Antworten
Als Teil eines Projekts, dass die Anforderungen zur Unterstützung mobiler Geräte, ich habe auf das nachahmen des iPhone Umschalten mit CSS3. Ich habe das Aussehen und das Gefühl des Elements, ziemlich genau dort, und bin mit CSS3
Klar, CSS-Übergänge
1 Antworten
Verwende ich ein CSS-framework, welches es gilt, übergänge beim bewegen der Maus über Eingabe-Elemente. Ich habe eine Klasse, die will ich nicht haben, diesen übergang. Ist das möglich? bitte schieben Sie Ihren code zum besseren Verständnis InformationsquelleAutor
Machen Sie einen übergangseffekt in Twitter Bootstrap
1 Antworten
Bin ich wirklich neu auf Twitter Bootstrap (in meiner zweiten Stunde lernen 🙂 Möchte ich ein gleitender übergang Effekt wie dieser: http://webdesigntutsplus.s3.amazonaws.com/tuts/317_coming_soon/demo/index.html Wie gehe ich über das tun dies in Twitter Bootstrap. Mein problem ist, dass ich
Ändern der Hintergrundfarbe der alle 30 s (fade-übergang)
1 Antworten
Ich möchte, dass jemand mir sagen, was ist der code für eine Webseite die hintergrund Farbe (die Hintergrundfarbe der gesamten Seite) zu verändern (fade-übergang) alle 30 s, um eine bestimmte Farb-Vielfalt. Ist es einfach? Ich denke css
Spinner für Twitter Bootstrap .btn
4 Antworten
Ich versuche zu erstellen spinners für Twitter Bootstrap-Tasten. Spinner sollte zeigen, einige work-in-progress (ie. ajax-request). Hier kleines Beispiel: http://jsfiddle.net/AndrewDryga/zcX4h/1/ HTML (voll auf jsfiddle): Unknown element (no animation here!): <p> <button class="btn-success has-spinner"> <span class="spinner"><i class="icon-spin icon-refresh"></i></span> Foo
CSS transition fade-in
2 Antworten
So habe ich verwendet CSS-übergänge vor, aber ich habe einen eindeutigen Fall mit diesem ein. Ich Schreibe ein benutzerdefiniertes plugin für die Erstellung von modals. Im wesentlichen erstelle ich ein div-on-the-fly document.createElement('div') und hängen Sie an den
CSS3 transition für "top" und "left" Eigenschaften funktioniert nicht
3 Antworten
Habe ich eine Liste mit einem Element in der Liste der Umstellung auf den Nordosten, wenn ich den Mauszeiger über Sie. Mit margin-top und margin-left Eigenschaft übergänge gearbeitet, aber das Element, das schwebte über gehalten, drängen andere
transform:translateX-vs Umstellung auf Links-Eigenschaft. Was hat bessere Leistung? CSS
2 Antworten
Mache ich ein slide-out Menü mit HTML und CSS3, insbesondere übergänge. Ich würde gerne wissen, was ist beste Praxis /beste Leistung zu schieben einen relativ positionierten div-horizontal. Wenn ich auf eine Schaltfläche klicken, fügt es eine Klasse,
CSS3 Transition Polyfill
4 Antworten
Okay, also die meisten von Euch wird bekannt sein, die mit CSS3 Transitions, ich bevorzuge es oben jQuery-Animationen mit der Einfachheit von CSS. Mein nur bedauern ist, dass es nicht im IE funktioniert < 9( Wie immer
css3 button-Hintergrundfarbe unendliche übergang
2 Antworten
Ist es ein Weg, um eine Schaltfläche Hintergrundfarbe ausblenden von Grau zu blau, dann wieder Grau, die nur mithilfe von css3? Ein gutes Beispiel ist ein Standard-action-button ist Kakao? Ich weiß, das kann man in javascript aber
Overlay-hintergrund-Bild mit einer rgba-Farbe, mit einer CSS3 transition
2 Antworten
Heute früh fragte ich Overlay-hintergrund-Bild mit einer rgba-Hintergrundfarbe. Mein Ziel ist es, ein div mit einem background-image, und wenn jemand mit der Maus über den div-hintergrund-Bild wird überlagert mit einer rgba-Farbe. In die Antwort, eine Lösung mit
CSS3 übergang vermasselt Schriften in webkit?
10 Antworten
Seitdem habe ich ein css-übergang (der erste war auf schweben, die zweite war eine animation) scheint es versaut haben meine Schriften, Sie sehen "anders". Es ist völlig Bizarr, ich habe gesucht für Stunden und kann nicht finden,
CSS3 Übergänge - Wie Verzögerung rücksetzen der z-index-Eigenschaft?
3 Antworten
Grundsätzlich ein "highlight" - Klasse Hinzugefügt, um Elemente mit der Klasse "edge" dynamisch per javascript auf mouseenter. Das highlight der Klasse entfernt auf mouseleave. Ich möchte, um den übergang des border-color dieser Elemente. Aber dieses "highlight" Klasse
CSS3 Transition: Verschiedene übergänge für *IN* und *OUT* (oder der Rückkehr von der transition state)
1 Antworten
Ursprünglichen Frage... aktualisiert funktionierenden code unten: Habe ich ein lade Bild kommt während eines ajax-load-Ereignis. Das Bild zeigt/versteckt durch hinzufügen oder entfernen "laden" - Klasse für das body-element. Derzeit ist das laden von Bild animiert background-size von
css3 slideup nach unten schieben
3 Antworten
Wie kann ich das style-element mit css-übergängen, so das man die Folie nach oben /unten /Links /rechts wenn Sie versteckt sind? .hideUp { transition: .5s; display:none; } .hideLeft { transition: .5s; display:none; } Möchte ich hinzufügen, dass
CSS3-Transformationen und-übergänge (Webkit)
1 Antworten
Betrachten Sie die folgenden fiddle p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s
CSS-Webkit-Transition Fade-out langsam als Fade-in
2 Antworten
Dies ist, was ich habe: .box{ background:#FFF; -webkit-transition: background 0.5s; } .box:hover{ background:#000; } Aber dies hängt sowohl onmouseover und onmouseout Aktionen, aber gibt es nicht eine Möglichkeit, Sie zu kontrollieren? So etwas wie: -wekbkit-transition-IN: background 1s;
Font-Weight CSS-Übergang in Chrom
7 Antworten
Versuchen, um font-weight ordnungsgemäß übergang von der '400' , '600', mit CSS, aber es scheint nicht zu funktionieren in Chrome. Ist das ein bekannter bug oder mache ich etwas falsch? Überprüfen Sie die Geige hier für ein
Bild-Breite/Höhe-übergang funktioniert nicht
2 Antworten
Mit einem übergang beim vergrößern eines Bildes scheint nicht zu funktionieren in chrome. HTML: <img src="foobar.png"> CSS: img { float: left; margin-right: 10px; border-radius: 10px; width: 200px; -webkit-transition: width 1s ease, height 1s ease; } img:hover {
CSS 3 - der übergang-Präfixe -, welche zu verwenden?
6 Antworten
Ich habe eine Frage bezüglich der CSS-vendor-Präfixe für den übergang. Diese Quelle besagt, dass "Sie brauchen, um verwenden alle gebräuchlichen Präfixe für diese Arbeit, in allen Browser (-o-, -webkit-, -moz-, -ms-)". Die Seite zeigt nur die -webkit-
CSS3-animation transition: opacity funktioniert nicht
1 Antworten
ich habe einige Schwierigkeiten mit animierender ein dropdown Menü mit css3. Ich brauche es für die Arbeit mit css3 und nicht jQuery oder javascript. Ich habe alle Regeln nötig, die aber noch der Effekt nicht passiert. Kann
CSS3 transition - animation ändern "Ankerpunkt"?
1 Antworten
Ich versuche, mit css3 transition zu vergrößern div Breite und Höhe auf :hover. Es funktioniert gut, aber ich brauche, um den Anker von der animation. Wie es jetzt eingestellt ist auf der unteren linken Seite des div
CSS3 transition-Ereignis-Listener mit jQuery
4 Antworten
Ich die Umsetzung einer CSS3 transition Effekt auf ein Artikel-element, sondern der Ereignis-listener transitionend funktioniert nur in reinem JavaScript, nicht jQuery. Siehe Beispiel unten: //this works this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true); //this does not work $(this).parent().addEventListener(
Wie zu stoppen CSS3 transition
2 Antworten
Möchte ich halt eines übergangs, der im Gange ist. Ich habe ein paar Referenzen[1][2], die verstreut im internet, aber ich kann nicht scheinen, um Stück zusammen. Hier ist ein Turnschuh der erste Vorschlag (Mit jQuery und CSS-Transit
CSS3 Fade-Effekt
3 Antworten
a { float: left; width: 32px; height: 32px; text-align: left; text-indent:-9999px; background: url('../img/button.png') no-repeat 0 0; -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 2s; -o-transition: background 300ms ease-in 2s;
Zusammenbruch wird der übergang nicht arbeiten mit angular UI Bootstrap
2 Antworten
Ich versuche, erstellen Sie ein div, die ein - /ausblenden, wenn auf eine Schaltfläche geklickt wird. Die UI Bootstrap-Seite zeigt ein schönes, einfaches Beispiel mit einem css-übergang. Hier mein fiddle wo ich kopieren Sie Ihren code, fast
Detect Unterstützung für den übergang mit JavaScript
5 Antworten
Will ich dienen unterschiedliche javascript-Dateien, je nachdem, ob der browser unterstützt CSS3 transition ist oder nicht. Gibt es eine bessere Möglichkeit zu erkennen, Unterstützung für die Umstellung als mein code da unten? window.onload = function () {
angularjs angekettet fade-in / fade-out-übergang
3 Antworten
Ich habe mir die offizielle ein - /ausblenden übergang Beispiel am Ende dieser Seite... http://docs.angularjs.org/api/ng.directive:ngShow Ich habe versucht, es zu ändern, um eine nahtlose fade-übergang (übergang: Opazität 0,5 s Leichtigkeit-in-out) von einem div an den anderen, wo
Kann ich etwas zeichnen wie Wheel of Fortune mit CSS?
4 Antworten
Wünsche ich zeichne ein Glücksrad mit nur CSS und jQuery. Ich möchte nicht alle Bilder. Außerdem will ich mindestens 8 Segmente in der Kreis-und richtig auszurichten, jeden text Wort senkrecht in jedem segment. Hier ist ein Foto
Ist es möglich, den übergang von text-Ausrichtung mit CSS3 nur?
3 Antworten
Ist es möglich, den übergang von text-Ausrichtung mit css3? Zum Beispiel würde ich gerne animieren von text-Ausrichtung von Links nach rechts, aber das hinzufügen einer transition-Eigenschaft auf text-align nicht den trick tun. http://codepen.io/anon/full/lGDwB InformationsquelleAutor der Frage Adam
CSS3 Transition - Fade-out-Effekt
6 Antworten
Ich bin zu versuchen, die "fade out" - Effekt in reinem CSS. Hier ist die fiddle. Ich schaue in ein paar Lösungen online, aber nach dem Lesen der online-Dokumentationich bin versucht, herauszufinden, warum die slide-animation nicht funktionieren
CSS transition fade auf hover
2 Antworten
Ich habe ein problem festgestellt mit CSS übergänge. Ich bin der Gestaltung einer CSS Galerie für mein portfolio und ich muss meine Bilder verblassen auf hover. Ich habe das Spiel, um mit dieser für über eine Stunde
CSS (übergang) nach einem pseudo-element - how, um den übergang von Inhalten auf hover
1 Antworten
<!DOCTYPE html> <html> <head> <style> div { transition:after 3s; -webkit-transition:after 3s; } div:hover:after { content:"- positive!"; } </style> </head> <body> <div>Test</div> </body> </html> Habe ich diesen Beispielcode oben. Ich werde versuchen, zu verwenden 'übergang', so dass der
CSS Breite der übergang nicht funktioniert
3 Antworten
Hallo, ich bin versucht zu animieren, die width des span innerhalb der a dieser nav <nav class="navigator"> <ul> <li><a href="#home">H<span>home</span></a></li> <li><a title="What?" href="#what">W<span>what</span></a></li> <li><a title="Porfolio" href="#works">P<span>works</span></a></li> <li><a title="Who?" href="#who">W<span>who</span></a></li> <li><a title="Where?" href="#where">W<span>where</span></a></li> </ul> </nav> hier ist es