Tag: css-animations
CSS-Animationen machen es möglich, animieren Sie übergänge von einem CSS-style-Konfiguration zu einer anderen. CSS-Modul beschreibt eine Möglichkeit für Autoren zu animieren, die Werte von CSS-Eigenschaften im Laufe der Zeit, mithilfe von keyframes. Das Verhalten dieser keyframe-Animationen gesteuert werden können durch die Angabe Ihrer Dauer, Anzahl der Wiederholungen, und sich wiederholende Verhalten.
So ändern Sie die Dauer der CSS3-keyframes-animation mit JavaScript raw
1 Antworten
Gibt es eine Möglichkeit, ändern Sie die Dauer der CSS3-keyframes animation mit JavaScript? In CSS kannst du das mit der animation-duration-Eigenschaft: animation-duration: 1s; JavaScript sollte roh, ich don ' T wollen gehören jQuery oder anderen JS-Bibliotheken in
Verschieben Sie mehrere Hintergründe unendlich mit CSS
3 Antworten
Ich habe zwei Hintergründe: body { background-image: url(img/nemo.png),url(img/ocean.png); } Wie mache ich nemo.png background bewegen unendlich von Links nach rechts, aber nicht auf ocean.png background? EDIT:, Wenn er an den rechten Rand (und das Bild ist nicht
transform3d(): Mithilfe Prozentsatz zum Bewegen Innerhalb des Übergeordneten Objekts
4 Antworten
CSS-standard-Verhalten beim verschieben eines Objekts in Prozent, dass dieser Prozentsatz stellt die Abmessungen des übergeordneten Containers (div). Dies gilt nicht, wenn mit CSS3 transform: translate3d(). Wenn Sie mit prozentualen Werte für entweder die X -, Y-oder Z-Koordinate,
Wie, um eine glatte gestrichelte Grenze rotation animation wie "marching ants'
4 Antworten
Arbeite ich an einer css-animation mit 'Zahnräder und Ketten", aber bin nicht in der Lage zu schaffen, eine 'glatte' border rotation. Können Sie sehen, in diesem fiddle Wie (derzeit) bin ich mit einem pseudo-element zum generieren einer
Wie eine Schleife animierten text Banner mit css-keyframes
2 Antworten
Möchte ich Schleife diese Textanzeigen, banner mit css-keyframes. ersten gezeigt text1 zweite Hinzugefügt text2 (text1 bleibt dort) Dritte Taste (text1 und text2 bleibt auch dort) dann verschwinden 3 von Ihnen und wieder gezeigt, text1 zweite Hinzugefügt text2
CSS-Animationen ändern, Frame-Rate
2 Antworten
Blick auf die CSS-animation zu ersetzen, animierte GIFs beim laden der Räder. Es ist ein Grundsätzliches Beispiel hier http://jsfiddle.net/kFmY8/448/ #me { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg);} to { -webkit-transform:
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 animation-zu-Puls-Abschnitt von Bild
1 Antworten
Ich bin mit CSS-animation auf einem einfachen Bild. Ich will die pulse animation nur für target-Teil der Bild. Wie kann ich machen, dass Impuls-animation, so dass nur der text "Trello" änderungen Deckkraft? Hier ist mein code: CSS:
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
Drehen eines SVG-Pfad mit CSS3 um den eigenen Mittelpunkt
2 Antworten
Habe ich eine Reihe von SVG-Pfad, einer von Ihnen ist wie folgt: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z"></path> Ich versuche, ein drehen-animation mit dem folgenden code: .stuck #GOL { fill: red; transform: rotate(90deg); } #GOL {
eckige 2-animation vs css animation - Wann was?
2 Antworten
Ich versuche momentan aus angular2 ist animation und ich Frage mich, welchen konkreten Vorteil Sie bringen gegenüber standard-css-Animationen/übergänge. z.B. ein typisches material gestaltete Karte und hover-Effekte mit der box Schatten. Die meisten css-frameworks verwenden :hover und css-transitions.
Benutzerdefinierte Animationen in den Kompass?
1 Antworten
Frage ich mich, wie kann ich transle diese zu compass-Mixins in Verbindung @-webkit-keyframes shake { 0% { -webkit-transform: translate(2px, 0px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30%
CSS 3D-animation, wie?
2 Antworten
Möchte ich animieren, Dinge im 3D-Raum. Ich weiß, dies ist möglich mit CSS und HTML5, aber ich kann nicht finden, eine gute Anleitung für die praktische Anwendung! Fand ich diese website als ein Beispiel. Sie können wählen,
Sync CSS-keyframe-Animationen Farbe
2 Antworten
Vorausgesetzt, ich habe drei divs unbekannter Höhe hat man einen animierten hintergrund Farbe mit einem CSS-keyframe-animation (siehe http://css-tricks.com/color-animate-any-shape-2) @-webkit-keyframes super-rainbow { 0% { background: #ffff00; } 20% { background: #ffcd00; } 40% { background: #c3d74b; } 60%
CSS-animation für fallen, Vibrationen, etc
1 Antworten
Ich bin auf der Suche animiert bewegliche Objekte realistisch mit reinem CSS. Speziell: etwas fallen/Prellen einer schwingenden saite (simple harmonic motion/Sinus) etwas fallen, der durch eine Flüssigkeit (aus der Ruhe zu terminal velocity) Soweit ich bin mir
Wie animieren Sie die Bilder auf der Seite scrollen?
2 Antworten
Ich habe eine Seite wo ich paar Bilder. Ich würde gerne wissen, wie animiert Bilder als Benutzer scrollt auf der Seite nach unten und die Bilder werden sichtbar? Werfen Sie einen Blick auf diese Seite: http://www.elegantthemes.com/demo/?theme=Divi Als
Maßstab Bild mit CSS3-animation
3 Antworten
Ich versuche zu skalieren des Bildes, wie Licht-box. Wenn führen Sie die Größe des Bildes geändert, aber mit out-animation. <div id="dnn_ctr428_ContentPane" class="img-rectangular"><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC"> <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal"> <img alt="" src="/dnn_test/portals/0/Images/logo2.png?ver=1394-08-24-081741-293"> </div> </div></div> css: .img-rectangular:hover img {
CSS-3-fake-3D-Würfel-rotation zwischen 2 Boxen
3 Antworten
Habe ich realisiert ein flip-rotation mit css: .flip-card { position: relative; z-index: 1; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; } .flip-card-content { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 0.5s ease-in-out; -moz-transform-style: preserve-3d; -moz-transition:
CSS glatte bounce-animation
3 Antworten
Ich brauchte, um zu realisieren unendliche bounce-Effekt mit reinem CSS, also bezog ich mich diese Website und endete damit, dass diese. CSS: .animated { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count:
CSS Animation "Fade-In" nach Unten Schieben
1 Antworten
Ich bin versuchen, neu zu erstellen diese flash-animation in HTML/CSS, aber ich blieb stecken. Dies ist die eigentliche animation, das erste Bild mit dunklem hintergrund eingeblendet wird, dann wird das nächste Bild nach unten schieben http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/ Hier
css @-moz-keyframes animation funktioniert nicht auf firefox 18.0.1
2 Antworten
css @-moz-keyframes animation auf firefox 18.0.1 nicht funktioniert, Ich habe diese animation auf der vorherigen version( version vergessen vorhergehenden Zahl) , es war die Arbeit, Hier ist die animation <html> <head> <style type="text/css"> @-webkit-keyframes animation { 0%
CSS animation - Animieren Bild von Links nach rechts und Zunehmender Höhe entlang einer abgewinkelten Pfad
2 Antworten
Im moment bin ich mit css animation, um ein Bild von der linken zu der rechten Seite des Bildschirms. Dies funktioniert ohne Problem. Was ich tun möchte, ist eigentlich die animation zu starten, in einer bestimmten Höhe
Können wir ändern eine Schriftart Awesome spin-speed???
3 Antworten
Habe ich ein sich drehendes ZAHNRAD auf meiner website angezeigt mit diesem code: HTML: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> <i class = "fa fa-cog fa-5x fa-spin"></i> Persönlich denke ich, dass die Geschwindigkeit der Gang ist zu schnell. Kann ich
CSS3 Skala von Animations-Keyframes
3 Antworten
haben Sie ein paar Probleme mit css3-animation, Skalierung, Deckkraft und andere Dinge funktionieren, kann aber nicht scheinen, um Skala zu arbeiten. snippet: CSS: #treeLeaves { background: url(https://i.pinimg.com/originals/72/c0/8e/72c08eefa235ae1c8aa72caa71eeba39.jpg); background-repeat:no-repeat; width:100%; height:375px; z-index:5; position:absolute; bottom:140px; left:0px; } @keyframe leaves
Übergang von flex-grow-Elemente in einer flexbox
4 Antworten
Ist es möglich, um den übergang der Elemente in einer flexbox? Wenn Sie klicken Sie auf ich möchte, dass alle Elemente, die zu kollabieren, außer der, auf die geklickt wird. Die eine, die angeklickt wird, sollten alle
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-Animation funktioniert nicht in Google Chrome
1 Antworten
Ich versuche, mit diese loader in meine web-site scc-animation funktioniert gut in Firefox & IE aber nicht in Google Chrome. #loader{ width: 820px; height: 670px; border: none; overflow: hidden; margin: 0px 70px; background: #0d8aa5; position: relative; }
jQuery-CSS-Animationen mit addClass und removeClass
3 Antworten
So, ich habe jetzt die jQuery-Ajax-code, der prüft, ob der Benutzername und das Passwort korrekt sind. Aber anstatt nur die Anzeige einer Fehlermeldung, die ich möchte zu schütteln, das element als gut. Definieren Schütteln? Diese Art von
Testen, ob die Hardware-Beschleunigung aktiviert wurde, für eine CSS-animation?
1 Antworten
Wie kann ich sagen (für Testzwecke), wenn die Hardwarebeschleunigung aktiviert wurde, für eine CSS-animation? Ich habe den folgenden code, die im wesentlichen vergrößert ein element und macht diese im Vollbildmodus (ohne die HTML5 fullscreen API). Es zieht
CSS calc mit Erben
1 Antworten
Möchte ich inherit mit calc() wie diese: #foo { animation-duration: 10s; } #foo > .bar { animation-duration: calc(inherit + 2s); /* =12s */ } Aber es scheint nicht zu arbeiten. Ist es Browser-bug oder specs? Funktioniert das
FadeInUp css-animation nicht funktioniert
2 Antworten
Ich versucht, zu erstellen eine CSS-animation, wenn Sie den Mauszeiger über die box, es zeigt das div mit CSS-Animationen. Ich habe die folgende Seite als Referenz. klicken Sie hier aber ich nicht scheinen kann, erreicht das efx.
CSS3 animation funktioniert nicht im IE9
1 Antworten
CSS3-Animationen funktioniert nicht im IE9. Hier ist die jfiddle link. Ist es möglich, Sie in IE oder ich mache einige dumme Fehler? Hier ist der code, der nicht funktioniert: @-ms-keyframes rotating { 0% { -ms-transform: rotate(0deg); }
fügen Sie verzögert Zeit in css3 animation
3 Antworten
Ich habe gerade eine animation einem div, und es gelang. Nun möchte ich, um es erwies sich wegen seiner Verzögerung ist zu kurz! also, wie kann ich die verspätete Zeit zwischen animation (0% bis 25%) und animation
CSS3 animation funktioniert nicht im IE11 funktioniert aber in anderen Browsern
1 Antworten
Habe ich eine CSS3-animation auf eine Schaltfläche. Im moment funktioniert es perfekt überall, abgesehen von IE. Ich weiß, es wird nicht funktionieren, auch in älteren IE-Versionen, aber ich war mindestens zu erwarten, dass es funktioniert im IE11.
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
Kann ich animieren, mehrere css-Eigenschaften für die Transformation separat mit der keyframe-animation
1 Antworten
Möchte ich animieren, um zwei (oder mehrere) css-Eigenschaften für die Transformation separat mit der keyframe-animation wie diese: @keyframes translatex { 100% { transform: translateX(100px); } } @keyframes rotatez { 100% { transform: rotateZ(80deg); } } HTML: <div
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>
CSS Animation: Anzahl Inkrement-Effekt
1 Antworten
Ich bin zu wollen, um die animation Effekt, wenn die zahlen sich schnell ändern, Beispiel: http://jsbin.com/kevalutupe/1/ Ich bin zu wollen tun Sie dies, CSS allein (ich weiß, wie ich es code in JS), ich will nicht von
CSS-Übergang, nachdem die animation endet
2 Antworten
Habe ich eine css-transition, verschiebt ein element schweben und eine animation, dreht sich das element auf hover zu. Es gibt eine Verzögerung in der animation gleich um die Dauer des übergangs, so dass nach es ist den
CSS-animation, wechseln, drehen Sie auf klicken Sie auf
2 Antworten
Ich bin versuchen Sie, den Cursor in die folgende um 180 Grad drehen auf klicken Sie auf für mein dropdown-Menü. In der Lösung Im Versuch, zu implementieren, ändert sich die Klasse, von der die Einfügemarke zu wechseln-oder
Wie kann ich die Schleife einer css-animation mit mehreren keyframe-Definitionen?
2 Antworten
Das Problem Ich habe zwei css-keyframe-Animationen, die ich laufen, auf einem einzigen element: .fade-bg { animation-name: fade-bg-1, fade-bg-2; animation-delay: 0, 6s; animation-iteration-count: infinite; animation-direction: alternate; } Sind die Animationen so definiert: @keyframes fade-bg-1 { from { opacity:
Animieren Blasen nach oben kontinuierlich mit CSS3?
2 Antworten
Folgendes Bild sehen: http://i.imgur.com/3vTrB.png Sehen, diese transparenten Kreise im hintergrund? Was ich machen möchte, ist Sie animieren, von unten nach oben, und dann manuell nach unten springen (Bildschirm ausschalten) und neu starten der animation. Die Kreise sind
CSS3 Spin Animation
7 Antworten
Ich gelesen haben schon ein paar demos und habe keine Ahnung, warum ich nicht bekommen kann die CSS3-spin-Funktion. Ich bin mit der neuesten stabilen Version von Chrome. Fiedel: http://jsfiddle.net/9Ryvs/1/ CSS: div { margin: 20px; width: 100px; height:
Größenänderung SVG Kreisradius Mithilfe von CSS-Animation
3 Antworten
Ich versuche zu animieren, einen SVG-Kreis-radius-Attribut mit CSS. Während (mit dem Firefox-Element Untersuchen-tool) kann ich sehen, dass die animation selbst eingerichtet ist und ordnungsgemäß ausgeführt wird, die Größe der ".innerCircle" nicht sichtbar verändern. Wenn Sie Sie vor
Wie man eine dia-animation zwischen zwei Bootstrap 3 tabs?
3 Antworten
Ich versuche, herauszufinden, wie zu tun ist, schieben Sie nach Links, rechts, oben, unten zwischen zwei Bootstrap 3 tabs.Ich suchte im web und überraschend haben nichts gefunden. Die nächste Sache, die ich gefunden habe, war DIESE Bootstrap
Kann ich mich bewerben, Animationen, um die Margen?
3 Antworten
Ich versuche zu animieren, in CSS3 Ränder, die diese Website scheint zu sagen, man kann, aber ich kann Sie nicht arbeiten. Eigentlich habe ich 3 Animationen. 1 für eine einfache erste fadeIn beim erstmaligen laden, dann die
CSS-animation funktioniert nicht im IE und Edge
1 Antworten
Habe ich den folgenden CSS-code, ist es ein schönes sonar-Effekt angewandt auf ein element schweben. Es funktioniert gut in Firefox, Opera und Chrome aber ich kann nicht damit es funktioniert in IE(10+) und Edge zu. CSS: body
wie eine geloopte animation mit css3 warten
3 Antworten
Ich habe eine css3-animation mit dem folgenden: @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .animated { -webkit-animation-name: rotate; -webkit-animation-duration: 2.4s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: ease-in-out; } Funktioniert es einwandfrei, gut..., ich
Flip ein div-180 Grad mit Hilfe von css und javascript
2 Antworten
Will ich flip ein div um 180 Grad, indem Sie eine javascript-Funktion, die Trigger eine css-animation. Mein div hat die folgende Deklaration: .start-photo-thumb { position: relative; float: left; background: #444444; height: 192px; width: 192px; margin-right: 10px; margin-bottom:
Erstellen Sie eine GIF-Datei aus einer HTML-animation
1 Antworten
DAS PROBLEM Ich habe eine HTML-animation mit google web designer, dann muss ich mein Projekt exportieren als GIF. Google web-designer, aber kein tool zum exportieren als GIF so: , WAS ICH VERSUCHT HABE Ich habe versucht, den